我要评论一、需求背景
虽然我经常在很多地方都说过，“前端脱敏，脱裤子放屁。”
但在用户需要截图，或者是数据极其敏感的情况下，不管后端是否脱敏，前端都还是应该给人脱敏一下的。
否则用户截图的话，就需要先截图，再用截图工具抹掉敏感信息后再发送，如果是极其敏感的数据的话。
所以需求来了：
要求在前端表格中的所有敏感数据列都需要脱敏，且需要支持用户点击查看原始数据。
二、需求目标
2.1 实现效果
2.2 如何使用
2.3 自定义脱敏
只需要在需要脱敏的属性上的 @table() 装饰器中配置脱敏方式即可。当然，也支持直接自定义脱敏：
实现的效果就这样咯：
三、实现过程
3.1 @table参数声明
我们需要在负责管理表格状态的 @table() 装饰器的参数中添加下面一些如 2.3 截图中的配置项：
3.1.1 desensitize 脱敏类型
配置这个后才能自动脱敏，该配置是个枚举选项：
static telephone = new airdesensitizetype(0, '座机号码', 3, 4) static mobile = new airdesensitizetype(1, '手机号码', 3, 4) static id_card = new airdesensitizetype(2, '身份证号', 6, 4) static bank_card = new airdesensitizetype(3, '银行卡号', 4, 4) static car_number = new airdesensitizetype(4, '车牌号', 2, 1) static email = new airdesensitizetype(5, '邮箱', 2, 2) static chinese_name = new airdesensitizetype(6, '中文名', 1, 1) static address = new airdesensitizetype(7, '地址', 3, 0) static ip_v4 = new airdesensitizetype(8, 'ipv4地址', 0, 0) static custom = new airdesensitizetype(9, '自定义', 0, 0)
其中，末尾的两个数字代表脱敏的头部保留数量和尾部保留数量。
3.1.2 desensitizehead
脱敏开始保留的数量，默认为0，可覆盖 3.1.1 中的 倒数第二 个参数。
3.1.3 desensitizetail
脱敏结尾保留的数量，默认为0，可覆盖 3.1.1 中的 倒数第一 个参数。
3.1.4 desensitizesymbol
脱敏符号，默认为 *。
3.2 编写脱敏助手类
我们定义了一个 airdesensitize 助手类，用于实现脱敏逻辑。
/**
* # 脱敏助手类
*
* @author hamm.cn
*/
export class airdesensitize {
/**
* ## `ipv4` 的块长度
*/
private static readonly ip_v4_part_count = 4
/**
* ## 字符串替换
*
* @param text 原始字符串
* @param head 头部保留长度
* @param tail 尾部保留长度
* @param symbol 中间替换的单个符号
* @return 替换后的字符串
*/
public static replace(text: string, head: number, tail: number, symbol: string): string {
if (head < 0 || tail < 0 || head + tail >= text.length) {
return text
}
let str = ''
for (let i = 0; i < text.length; i += 1) {
if (i >= head && i <= text.length - tail - 1) {
str += symbol
} else {
str += text[i]
}
}
return str
}
/**
* ## `ipv4` 地址脱敏
*
* @param ipv4 `ipv4` 地址
* @param symbol [可选]符号
* @return 脱敏后的 `ipv4` 地址
*/
public static desensitizeipv4address(ipv4: string, symbol = airconstant.asterisk): string {
const strings = ipv4.split(airconstant.dot)
if (strings.length !== airdesensitize.ip_v4_part_count) {
return ipv4
}
const temp = symbol + symbol + symbol
strings[1] = temp
strings[2] = temp
return strings.join(airconstant.dot)
}
/**
* ## 文本脱敏
*
* @param valuestring 原始文本
* @param type 脱敏类型
* @param head 头部保留
* @param tail 尾部保留
* @param symbol 脱敏符号
* @return 脱敏后的文本
*/
public static desensitize(valuestring: string, type: airdesensitizetype, head = 0, tail = 0, symbol = airconstant.asterisk): string {
switch (type.key) {
case airdesensitizetype.bank_card.key:
case airdesensitizetype.id_card.key:
case airdesensitizetype.mobile.key:
case airdesensitizetype.address.key:
case airdesensitizetype.car_number.key:
case airdesensitizetype.email.key:
head = math.max(type.head, head)
tail = math.max(type.tail, tail)
break
case airdesensitizetype.ip_v4.key:
return airdesensitize.desensitizeipv4address(valuestring, symbol)
case airdesensitizetype.chinese_name.key:
head = math.max(type.head, head)
tail = math.max(type.tail, tail)
if (valuestring.length <= head + tail) {
tail = 0
}
break
case airdesensitizetype.telephone.key:
// 包含区号 前后各留4 不包含则各留2
// eslint-disable-next-line no-case-declarations
const iscontainregioncode = valuestring.length > 8 ? 4 : 2
head = math.max(iscontainregioncode, head)
tail = math.max(iscontainregioncode, tail)
break
default:
}
return this.replace(valuestring, head, tail, symbol)
}
}
3.3 给表格组件添加脱敏逻辑
<el-table-column>
<!-- ...省略... -->
<template v-if="columnconfig.desensitize">
{{ airdesensitize.desensitize(getcolumnrowdata(row), columnconfig.desensitize, columnconfig.desensitizehead, columnconfig.desensitizetail, columnconfig.desensitizesymbol) }}
</template>
<template v-else>
getcolumnrowdata(row)
</template>
<!-- ...省略... -->
</el-table-column>
我们添加一个 v-if 来判断是否需要脱敏，然后使用 airdesensitize 助手类提供的 desensitize 方法来脱敏即可。
好的，搞定！
接下来其他同事就只需要美滋滋的去给属性的 @table() 装饰器标参数即可～
到此这篇关于使用typescript和装饰器实现前端数据脱敏的文章就介绍到这了,更多相关typescript数据脱敏内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论