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

 对姓名进行脱敏处理

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'

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

<div>{{ item.userCardNo | peridcardtm}}</div>

记录一下万能的脱敏方法

// 兼容手机号，姓名，身份证号等多种字符的脱敏方法
function getStr(beginLen: number, endLen: number, max = 999) {
  // 这里用了闭包，闭包用完后需手动释放内存
  return function (str: string) {
    const firstStr = str.substr(0, beginLen)
    const lastStr = endLen == 0 ? '' : str.substr(endLen)
    let repeatNum = Math.max(0, str.length - (beginLen + Math.abs(endLen)))
    repeatNum = Math.min(max, repeatNum)
    const middleStr = '*'.repeat(repeatNum)
    return firstStr + middleStr + lastStr
  }
}
export const getName = (str: string) => {
  let getResult = null
  switch (str.length) {
    case 1:
    case 2:
      getResult = getStr(1, 0)
      break
    case 3:
      getResult = getStr(1, -1)
      break
    case 4:
      getResult = getStr(1, -1, 2)
      break
    case 5:
      getResult = getStr(1, -1, 3)
      break
    case 6:
      getResult = getStr(1, -1, 4)
      break
    case 11:
      getResult = getStr(3, -2, 6)
      break
    case 18:
      getResult = getStr(3, -2, 13)
      break
    default:
      getResult = getStr(1, -1, 8)
      break
  }
  const result = getResult(str)
  getResult = null // 闭包-需手动释放
  return result
}