多角色权限校验应通过映射表和角色遍历实现，避免硬编码；disabled用于表单控件禁用交互，hidden用于全局隐藏元素但需配合aria-hidden；权限状态必须与数据实时同步，禁用class模拟权限。
data-permission 怎么绑定多角色权限判断
单角色权限用 user.permissions.includes('post:edit') 就够了，但多角色场景下，用户可能同时属于“编辑组”和“审核组”，权限是并集而非单一数组。硬编码每个组合会爆炸式增长。
推荐做法是把权限校验逻辑抽成函数，接收权限标识符（如 "post:publish"）后，遍历用户所有角色的权限配置表：
- 维护一个映射表
rolePermissions = { editor: ['post:edit', 'post:delete'], reviewer: ['post:review'] } - 用户角色列表存在
user.roles = ['editor', 'reviewer']中 - 校验函数返回
user.roles.some(role => rolePermissions[role]?.includes(permission)) - 避免在 DOM 遍历时重复计算：先算出完整权限集合
const allPerms = new Set(flatten(user.roles.map(r => rolePermissions[r] || [])))，再用allPerms.has(permission)
disabled 和 hidden 在多角色视图中该选哪个
二者语义不同，选错会导致行为不一致或可访问性问题。
disabled 只对表单控件（<button></button>、<input>、<select></select>）生效，且会自动从表单提交中排除；hidden 是全局属性，适用于任何元素，但只是视觉隐藏，仍参与 tab 键导航、屏幕阅读器朗读（除非加 aria-hidden="true"）。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 操作按钮（如“发布”“删除”）必须用
disabled，否则用户按 Enter 键仍可触发 - 整行或整列无权限时，用
hidden+aria-hidden="true"更合适——既移出视觉流，又不让辅助技术误读 - 别混用：
disabled的<div> 无效，<code>hidden的<button></button>仍能被键盘聚焦 - 多角色切换后，要同步重设属性：先移除旧
disabled，再根据新权限决定是否加回 - 确保权限校验函数是纯函数，不依赖闭包里的旧
user对象，每次调用都传入最新权限数据 - 如果用
fetch切换角色，要在.then()里显式调用applyPermissions(newUserData)，而不是等某个事件自动触发 - 避免直接操作
document.querySelectorAll('[data-permission]')后反复 setAttribute —— 大量 DOM 操作卡顿，应批量收集节点再统一处理 - React/Vue 项目中，优先用响应式变量驱动（如
v-if="hasPermission('post:publish')"），不要手动改disabled -
data-permission是语义化标记，明确表达意图，且不会被 CSS 影响 - 用
getBoundingClientRect()或offsetParent判断元素是否可见，不如直接读el.hasAttribute('disabled')可靠 - 调试时，
console.log([...document.querySelectorAll('[data-permission]')].filter(el => !el.disabled))能立刻定位漏控节点；查 class 得翻 CSS 规则、匹配选择器、看是否被覆盖 - 自动化测试也更简单：断言
expect(button).toHaveAttribute('disabled')比断言toHaveClass('is-disabled')更贴近真实行为
权限变更后筛选 DOM 不生效的常见原因
用户切换角色后，界面没更新，不是 JS 写错了，而是状态同步时机不对。
典型错误是把权限校验逻辑放在页面加载时一次性执行，之后就不管了。而角色切换往往通过 API 异步返回新权限数据，DOM 控制却没重新跑。
为什么不能用 class 模拟权限状态
有人用 class="permission-post-edit" 加 CSS 控制显隐，看似省事，实则埋雷。
class 是样式载体，不是状态标识。它无法表达“当前用户无此权限”，只能表达“这个按钮长得像有权限的样子”。一旦样式被覆盖、CSS 文件加载失败或用户禁用样式，权限控制就彻底失效。
disabled，而是让权限数据、DOM 状态、用户操作三者始终对齐——尤其在多角色动态切换时，任意一环脱节，就会出现“看着有权限却点不动”或“看着没权限却能提交”的矛盾现象。
