前端对敏感数据身份证号姓名等进行脱敏处理

 对姓名进行脱敏处理

if (item.authName && item.authName.length == 2) {
  item.authName = item.authName.substring(0, 1) + "*";
} else if (item.authName && item.authName.length == 3) {
  item.authName =
    item.authName.substring(0, 1) +
    "*" +
    item.authName.substring(2, 3); //截取第一个和第三个字符
} else if (item.authName && item.authName.length > 3) {
  item.authName =
    item.authName.substring(0, 1) +
    "*" +
    "*" +
    item.authName.substring(3, item.authName.length); //截取第一个和大于第4个字符
}

对身份证号进行脱敏处理

 if (item.authCardNo) {
    item.authCardNo = item.authCardNo.replace(/^(.{3})(?:\d+)(.{4})$/, "$1***********$2");
}

 

用过滤器对敏感信息进行脱敏处理：

建立filter.js文件

import Vue from 'vue'

// 人民币过滤器
Vue.filter('moneyFormat', (value) => {
	return '¥' + Number(value).toFixed(2);
});
// 三位数姓名脱敏，中间一位隐藏
Vue.filter('threeName', (value) => {
	return value.replace(/(?<=[\u4e00-\u9fa5]).*(?=[\u4e00-\u9fa5])/, "*");
});
//身份证脱敏展示
Vue.filter('peridcardtm', (value) => {
	return value.replace(/^(.{3})(?:\d+)(.{4})$/, "$1**********$2");
});
//手机号码脱敏展示
Vue.filter('phoneteltm', (value) => {
	return value.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2");
});
// 两位数姓名脱敏，最后一位隐藏
Vue.filter('twoName', (value) => {
	return value.replace(/.*(?=[\u4e00-\u9fa5])/, "*");
});
Vue.filter('threeName', (value) => {
	return value
});

在main.js中全局引入filter.js文件

import '@/libs/filters'

在页面数据展示时使用身份证脱敏过滤器

{{ item.userCardNo | peridcardtm}}