前端脱敏是控制展示层可见范围而非掩盖数据，不修改原始数据只改变渲染结果，需区分字符串类、非固定长度字段及禁止前端脱敏的敏感信息。
前端脱敏不是“掩盖数据”，而是控制展示层的可见范围——原始数据仍可被后端或授权模块使用，但用户界面只呈现安全、合规的部分。关键在于：不改原始数据，只改渲染结果；不依赖后端预处理，也不把脱敏逻辑写死在模板里。
手机号、身份证、银行卡号等字符串类脱敏
这类字段长度固定或有明确格式，适合用正则替换或字符串截取实现局部掩码。核心是保留首尾可识别位，中间用*填充。
- 手机号（11位）常用“前三后四”：用
replace(/^(1[3-9]\d)\d{4}(\d{4})$/, '$1****$2') - 身份证（18位）常用“前四后四”：用
replace(/^(.{4})\d{10}(.{4})$/, '$1****$2')；15位旧证需单独判断 - 银行卡号按长度动态处理：前2位 +
'*'.repeat(len - 6)+ 后4位，不足6位不脱敏
姓名、邮箱等非固定长度字段的灵活脱敏
姓名可能2–5个字，邮箱域名部分不能动，所以不能硬写索引。推荐封装一个通用函数，支持按类型自动适配规则：
- 姓名：2字显示“*”，3字及以上显示“张*”或“张**”（保留首字，其余掩码）
- 邮箱：保留用户名前1–2位 + “***” + @及完整域名，如
u***@example.com - 函数可接收
before（保留前几位）、after（保留后几位）、ch（掩码字符）参数，便于复用
在 Vue/React 中统一处理渲染逻辑
避免每个组件都写一遍 maskPhone(user.phone)，应抽离为可复用能力：
立即学习“Java免费学习笔记（深入）”；
- Vue 可注册全局过滤器或自定义指令
v-desensitize:type="phone" - React 可封装 Hook
useDesensitized(value, type)或高阶组件 - 若用 Ant Design、Element Plus 等 UI 库，可在
Table的render列中调用脱敏函数，不影响原始 data
注意边界：哪些不该在前端脱敏
脱敏只是展示防护，不是安全兜底。以下情况必须交由后端处理：
- API密钥、JWT密钥、数据库连接串——绝不能出现在前端代码或响应体中
- 用户密码、支付密码、生物特征哈希值——前端连明文都不该接触
- 涉及权限判断的字段（如“是否VIP”“余额是否>1000”）——逻辑不能靠前端隐藏来保障
