我们在开发前端项目时,一般会对用户敏感信息(如姓名、手机号码、身份证号码)进行脱敏处理。本文以手机号码脱敏处理为例进行说明。如 13366668888 脱敏处理后变成 133****8888。具体处理方法如下:

/**手机号码脱敏处理
 * @method phoneDesensitization
 * @param {String} phone 需要处理的手机号码
 * @param {String} char 脱敏替换的字符
 * @return {String} 脱敏处理后的手机号码
 */
phoneDesensitization (phone, char) {
    return phone.replace(/(\d{3})\d*(\d{4})/, `$1${new Array(5).join(char)}$2`)
}

需要调用的地方直接调用:

console.info(phoneDesensitization('13366668888', '*'))  // => 133****8888
console.info(phoneDesensitization('13366668888', '密'))  // => 133密密密密8888

说明:

  • 这里主要使用了正则表达式的 分组$1,$2 的方法。
  • 通过 () 对字符串进行分组,$相当于下标从1开始的集合,$n相当于对应第n个索引的值。
  • /(\d{3})\d*(\d{4})/ 相当于把字符串前3个和后4个字符分为两个集合,$1${new Array(5).join(char)}$2 相当于保留前3后4的字符后,替换剩下字符串为新字符串 new Array(5).join(char)

注意:本文默认手机号码为11位数字,其他非空和特殊判断请读者自行处理!

如何通过类似方法,实现 姓名、身份证号码 等其他敏感数据的脱敏处理?

其实,前端脱敏不能达到完全脱敏的效果,通过查看交互响应报文,还是可以看到完整的信息。如果要实现真正意义上的脱敏,最好在后端处理!后端脱敏后再返回给前端展示。