字段脱敏需在视图层（如Ant Design columns或Vue scopedSlots）提前注入元信息规则，而非运行时遍历处理；嵌套字段须用点号路径精确注册，避免前缀匹配；隐藏应从数据流源头裁剪，优先服务端或BFF层；复用逻辑应封装为纯函数或Hook，确保规则与字段生命周期同步。

字段脱敏规则怎么配进视图配置里

脱敏不是加个 filter 就完事，得让前端渲染时自动识别哪些字段该掩码、哪些该隐藏——关键在视图层（比如 ant design 的 columns 或 vue 的 scopedslots）提前注入规则，而不是等数据回来再遍历处理。

常见错误是把脱敏逻辑写死在组件 render 函数里，结果同一份数据在列表页、详情页、导出 Excel 时脱敏不一致；或者用正则匹配字段名前缀（如 idCard、phone），但漏掉嵌套结构里的 user.contact.phone。

• 优先在视图定义时声明字段元信息：columns: [{ key: 'phone', title: '手机号', sensitive: true }]
• 对嵌套字段，用点号路径做键名：把 user.profile.idCard 当作独立字段注册，别指望自动递归扫描
• 避免用 includes('phone') 这类模糊匹配——shippingPhone 和 backupPhone 可能需要不同脱敏强度

前缀匹配脱敏的坑：为什么 startsWith('idCard') 不够用

前缀判断只适用于扁平字段，一旦后端返回的是树形结构（比如 { user: { base: { idCard: '110...' } } }），光靠字段名前缀根本捕获不到真实路径。更麻烦的是，同一个前缀可能对应多种敏感等级：idCardFront 要显示前4后3，idCardBack 却要完全隐藏。

• 实际应维护一张映射表：{ 'user.base.idCard': { type: 'idcard', mask: 'front' }, 'order.payInfo.cardNo': { type: 'card', mask: 'middle' } }
• 不要在运行时动态拼接字段路径去查表——JSON Schema 里字段顺序不保证，Object.keys(data) 遍历不可靠
• 如果用 Form 表单，getFieldDecorator 的 id 必须和脱敏规则键名严格一致，否则规则失效

结构层级隐藏：怎么让整个 user.bankAccount 区块不渲染

“隐藏”不是 CSS display: none，而是从数据流源头过滤掉——否则控制台仍能看到原始值，审计过不了。重点在于：谁负责裁剪？后端？前端？还是中间层？

• 服务端渲染（SSR）或 BFF 层最稳妥：根据用户角色 + 视图标识（如 view=summary），在组装响应体时直接删掉 bankAccount 字段
• 纯前端方案必须配合 schema 校验：用 ajv 或 zod 定义带 hidden: true 标记的字段，在 parse 阶段就剔除
• 切忌用 v-if="false" 或 ngIf 控制 DOM 显示——源数据还在内存里，DevTools 一眼可见

Vue/React 中怎么复用脱敏逻辑

别为每个组件写一遍 maskPhone(val)，也别全局挂 Vue.prototype.$mask——跨项目时规则不一致，升级成本高。

• 抽成纯函数库，输入字段值 + 规则对象，输出脱敏后字符串：maskValue('13812345678', { type: 'phone', keep: 3 })
• React 用自定义 Hook：useSensitiveField('user.phone', { type: 'phone' })，内部自动订阅数据变化并重算
• Vue 3 推荐用 computed + shallowRef 缓存脱敏结果，避免重复计算嵌套深的对象

真正难的不是写规则，是让规则和字段生命周期对齐——比如表格列动态增减时，新列的脱敏配置是否同步注入；表单异步加载 schema 后，脱敏映射表有没有及时更新。这些地方一漏，数据就裸奔了。