实现VUE input新增输入时用户敏感信息脱敏
近日接到需要输入用户信息的同时进行信息脱敏的需求，平时的脱敏只在展示时用到过，边输入边脱敏，本小白直接蒙了。难点在于，vue动态绑定的值不能脱敏后传给后端，需要传输客户填写的真实数据。研究一番最后决定采用“双input框”方法，通过区分展示值和真实值的方式，让接口传真实值，而页面展示脱敏后的数据。
那么下面就分三部分介绍：
-
- 第一部分 脱敏JS方法
- 第二部分 双input 元素
- 第三部分 真实值展示值转化
第一部分 脱敏JS方法
这里利用了vue的mixin混入策略，将脱敏的方法写成公共的，方便其他模块公用。
export const mixins = {
//身份证脱敏
methods: {
//身份证号脱敏
setCertNo(certNo) {
if (certNo && certNo.length >= 10) {
var certNo = certNo.trim();
// let cert1 = certNo.substring(0, certNo.length-4);
// let cert2 = cert1 + "****";
// return cert2;
// let cert1 = certNo.replace(/(\w{6})\w{2}(\w{6})\w{4}/, '$1**$2****');
let cert1 = certNo.substring(0, 6) + '**' + certNo.substring(8, certNo.length - 4) + '****';
return cert1;
}else{
return certNo;
}
},
//手机脱敏
setTel(tel) {
if (tel && tel.length >= 11) {
var pat = /(\d{3})\d*(\d{4})/
let telFinal = tel.replace(pat, '$1****$2');
return telFinal
}else{
return tel;
}
},
//脱敏姓名 方式一，根据性别变成某女士或者某先生
setName(str, sex) {
if (str && sex) {
let str1 = str.substr(0, 1);
let str2 = "";
if (sex == "2") {
str2 = str1 + "女士";
} else {
str2 = str1 + "先生";
}
return str2;
}
},
//脱敏姓名 方式二，不知性别用*代替名
setName1(str){
if(str){
let str1 = str.substr(0, 1);
let num1 = str.substr(1).length;
let str2 = ''
for(let i=0;i<num1;i++){
str2 += ' *'
}
let str3 = str1 + str2;
return str3;
}else{
console.log("姓名为空")
}
},
}
}
顺便说下mixin怎么使用：在某vue文件中的script标签中引用。
import {
mixins } from "@/api/mixin.js";
export default {
mixins: [mixins],
}
第二部分 双input 元素
总体思路就是，每个需要脱敏字段都写两个
input框。例如：
<el-form-item label="客户身份证号" prop="certNo">
<el-input
v-model="List.certNo"
placeholder="请输入客户身份证号"
@input="tuominSave('cert')"
@blur="tuominChange('cert')"
@focus='tuominFocus("cert")'
>el-input>
<el-input v-model="tuomin.certNo" style="display:none">el-input>
el-form-item>
可以发现，第一个input框是用来展示和承接用户输入数据的（List），第二个input框是用来存储用户输入的真实数据（tuomin），不需要展示在页面中，要给它设置
display:none。展示值input框还增加了三个事件绑定
@input @blur @focus，用来监听用户操作，具体内容见第三部分。
第三部分 真实值展示值转化
这部分主要靠三个绑定事件解决。一般采用脱敏的字段有姓名，身份证号和手机号。这里以这三个字段为例，根据不同传参实现为单个字段脱敏。
//脱敏-将数据从List对象保存到用于存储的tuomin对象中
tuominSave(type){
switch(type){
case "name":
this.tuomin.clientName = this.List.clientName
break;
case "cert":
this.tuomin.certNo = this.List.certNo
break;
case "phone":
this.tuomin.clientPhone = this.List.clientPhone
break;
}
},
//脱敏-将用于展示的input里的数据转化成脱敏
tuominChange(type){
switch(type){
case "name":
this.List.clientName = this.setName2(this.List.clientName?this.List.clientName:'')
break;
case "cert":
this.List.certNo = this.setCertNo(this.List.certNo?this.List.certNo:'')
break;
case "phone":
this.List.clientPhone = this.setTel(this.List.clientPhone?this.List.clientPhone:'')
break;
}
},
//脱敏-修改时触发焦点，将清空里面的值，方便重新填写
tuominFocus(type){
if(this.statusDialog == 2){
//处于修改状态
switch(type){
case "name":
this.List.clientName = ''
console.log("清除name")
break;
case "cert":
this.List.certNo = ''
console.log("清除cert")
break;
case "phone":
this.List.clientPhone = ''
console.log("清除phone")
break;
}
}else{
console.log(this.List)
}
},
注意：脱敏时需要判断待脱敏的值是否为undefined，为undefined后脱敏会导致表单使用TAB键 出现 赋值错乱问题。
然后进行提交，操作接口请求。提交时将List赋值给postData，脱敏过的字段需要tuomin对象里的真实值
单独替换掉postData中的展示值字段。
let postData = this.List;
postData.clientName = this.tuomin.clientName;
postData.certNo = this.tuomin.certNo;
postData.clientPhone = this.tuomin.clientPhone;
//执行请求接口
quest(postData).then(res => {
...})
另外，如果修改功能也需要进行脱敏，修改的时候需要将接口请求到的item数据，分别赋值给List和tuomin，注意不能直接用一个对象等于另一个对象（this.tuomin
= item），对象之间赋值只会是复制地址（内存块指针），需要赋值具体的值（this.tuomin.name = item.name）去实现。
//当点击修改操作时
//1.将接口获取的item分别赋值给List和tuomin
this.List = item;
this.tuomin.clientName = item.clientName;
this.tuomin.clientPhone = item.clientPhone;
this.tuomin.certNo = item.certNo;
//2.将展示层的数据脱敏后回显
this.List.clientName = this.setName2(this.List.clientName);
this.List.clientPhone = this.setTel(this.List.clientPhone);
this.List.certNo = this.setCertNo(this.List.certNo)
以上，能够完成VUE input新增输入时用户敏感信息脱敏功能，但总觉得还是笨拙，如果您有更好地方法，希望我们可以多交流交流。
如有不准确之处欢迎大佬们指正，如果有帮助到您也请多多点赞和评论呀~我是前端小桃，我在这里成长。