监听用户打开控制台修改dom属性内容
今天程序猿节，祝大家永无bug
昨天接了个功能，已知有一个input类型为password，在修改内容的时候也是密文展示，但是用户还是觉得不安全，因为可以在f12下找到dom并直接修改input的type从而直接使其明文展示
wtf? 真有这么不当人的用户咩？？
后来想了个办法，页面上展示的是基于此变量的计算属性比如computedStr,然后页面上的展示本质上就是这个计算属性的值:
<el-input
v-model="passwordComputed"
type="password"
id="pswId"
style="border:1px solid red"
:clearable="dialogBtn !== 'preview'"
:readonly="dialogBtn == 'preview'"
/>
随后在计算属性里写上它的逻辑，由于它是v-model因而要使用comp的get&set
// computed
passwordComputed: {
get() {
const basePasswordLen = baseMsg; //这个是该计算属性依赖的源数据 已脱敏
console.log("basePasswordLen :>> ", basePasswordLen);
let encryptedStr = ``;
for (let index = 0; index < basePasswordLen.length; index++) {
encryptedStr += `•`;
}
return encryptedStr; // 当仅展示时，返回一堆`*`号，这样用户修改type也不怕啦，因为它本质上就是`*`
},
set(newVal) {
// 双向绑定的是计算属性，
// const basePasswordLen = baseMsg; //这个是该计算属性依赖的源数据 已脱敏
// const prePsdLen = basePasswordLen.length; // 上一次的数据
// const psdEle = document.getElementById("pswId");
// console.log("psdEle :>> ", psdEle);
// if (!newVal) { //如果是新值是空字符，则将原值赋空
// baseMsg = ``;
// return;
// }
// // 如果小于原值，说明是删除动作
// if (newVal.length < prePsdLen) {
// 删减动作
// } else {
// const { resultVal, startIndex, filterText } = this.filterNewValue(
// newVal,
// basePasswordLen
// );
// baseMsg = resultVal; //将计算后的数据反赋给真正的变量
// 这时候光标会异常，因为上一行是整体赋值操作而不是新增操作，因而必须要重新设置下光标
// this.$nextTick(() => {
// psdEle.focus(); // 重新获取焦点
// console.log(" psdEle.selectionStart :>> ", psdEle.selectionStart);
// selectionStart与selectionEnd是同一值时，显示光标所在所有，不同值时，中间的差值就是选中态
// psdEle.selectionStart = psdEle.selectionEnd =
// startIndex + filterText.length + 1; // 重新设置光标 这一点非常重要，因为此input不允许明文查看，因而光标的位置就很关键。 模仿光标正常input下输入态 这里其实还要加`1`，举个例子，假设输入了四个字符，那么光标其实应该在第四位索引上
// });
// }
}
}
在新增动作里，添加对数据的计算
// methods
// 数据清洗-》获取输入的数据和数据的第一个的下标
filterNewValue(nv, ov) {
let filterText = "";
let startIndex = null;
for (let index = 0; index < nv.length; index++) {
if (nv[index] !== `•`) {
filterText += nv[index];
if (startIndex === null) {
startIndex = index;
}
}
}
const resultVal = this.insertStringAt(ov, filterText, startIndex);
return {
resultVal,
startIndex,
filterText
};
},
// 此处计算用户本次输入后的明文数据(包含所有)
insertStringAt(originalString, stringToInsert, insertionIndex) {
if (insertionIndex < 0) {
insertionIndex = 0;
}
if (insertionIndex > originalString.length) {
insertionIndex = originalString.length;
}
const part1 = originalString.slice(0, insertionIndex);
const part2 = originalString.slice(insertionIndex);
return part1 + stringToInsert + part2;
},
终于写完了，擦擦脑门汗，发现有一个大问题，我可以监听用户修改条目时的新增，无论他在开头结尾或中间，但是我却无法监听它的删减，准确的说，无法监听它删减时对应的数据和下标。
因为：passwordComputed的值是一个基于base数据的***，所以在删减这个数据的时候拿到的新值也只是**
眼前真的一黑...
狠狠抽了一口空气，突然想明白了一件事:当前需求是希望用户不要在f12时修改dom,那么我们就可以以此为切入点:
网上的案例是当用户打开f12时直接debugger:
mounted(){
// 监听用户f12时，直接debugger；可以但不该
((function () {
var callbacks = [],
timeLimit = 50,
open = false;
var str = /x/
str.toString = function () {
window.clearInterval = function () {
return '不能使用清除定时器了'
}
}
setInterval(loop, 1);
return {
addListener: function (fn) {
callbacks.push(fn);
},
cancleListenr: function (fn) {
callbacks = callbacks.filter(function (v) {
return v !== fn;
});
},
};
function loop() {
var startTime = new Date();
debugger;
if (new Date() - startTime > timeLimit) {
if (!open) {
callbacks.forEach(function (fn) {
fn.call(null);
});
}
open = true;
window.stop();
console.log(str)
window.location.reload();
} else {
open = false;
}
}
})()).addListener(function () {
window.location.reload();
});
}
这段代码写下来，当用户一打开开发者工具时就直接进入调试态，这太粗暴，太不优雅，本着对用户负责的态度，于是放弃了这个做法(毕竟我们不能不当人不是)
然后又在想，可不可以直接监听用户在按f12对dom修改的动作，于是就找到了mutationObserve这个api，废话不说，上代码
贴贴：
<script>
let observer // 没用必要将其变成响应式，浪费性能
mounted(){
this.$nextTick(() => {
// 选择需要观察变动的节点
const targetNode = document.getElementById("pswId");
// 观察器的配置（需要观察什么变动）
// attributes: 观察受监视元素的属性值变更
// childList: 监视目标节点（如果 subtree 为 true，则包含子孙节点）添加或删除新的子节点
// subtree: 其他值也会作用于此子树下的所有节点，而不仅仅只作用于目标节点
const config = { attributes: true, childList: false, subtree: false }; // childList && subtree须设置为false以节省性能
// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === "attributes") {
targetNode.type = "password";
// 停止监听，一定要有这一步，否则页面将直接卡死！
observer.disconnect(); //关键点1
// 随即重新监听
observer.observe(targetNode, config); // 关键点2
}
}
};
// 创建一个观察器实例并传入回调函数
observer = new MutationObserver(callback);
// 以上述配置开始观察目标节点
observer.observe(targetNode, config);
}
}，
beforeDestroy() {
// 停止观察
observer.disconnect();
},
<script>
tips1： 关键点1必须要加，否则将会死循环至浏览器崩溃
tips1： 关键点2必须要加，否则将不再监听
其实可以封装成一个指令以便在整个项目里使用，不过没时间(其实就是懒)
以上。
