组件级权限校验不能依赖data-permission属性，因其可被devtools篡改，真正有效的是基于后端返回的实时权限数据（如user.permissions数组）进行动态判断；vue中v-permission指令需在mounted/update钩子中每次重新校验、响应式更新dom，优先用el.remove()彻底移除无权节点，并避免闭包缓存旧状态。
组件级权限校验不能靠data-permission属性做决策
很多人在按钮或卡片上加data-permission="user:delete"，再用 JS 读取它来控制显隐——这本质是同步 UI 状态的“便签”，不是校验。攻击者打开 DevTools 删除该属性、改值、甚至直接调用click()，就能绕过。真正起作用的永远是后端返回的权限数据（如user.permissions数组）和前端基于它的实时判断逻辑。
Vue 中用自定义指令实现 v-permission 的关键点
指令必须每次挂载时重新校验，不能只在初始化时跑一次；权限变更后需响应式更新 DOM，否则角色切换后按钮仍残留。
-
mounted钩子中获取最新权限数据（从 Pinia/Vuex 或传入的 binding.value），避免闭包缓存旧状态 - 无权限时优先用
el.remove()彻底移除节点，而非仅设style.display = 'none'——后者仍可被键盘聚焦、被屏幕阅读器读出 - 若需禁用而非隐藏（如表单按钮），应同时设
el.disabled = true+el.setAttribute('aria-disabled', 'true')，否则辅助技术可能误判 - 不要在指令里重复遍历角色权限映射表；提前计算好全量权限集合
new Set(allPermissions)，用.has()查，性能更稳
React 中用高阶组件或 Hook 实现权限包裹的常见陷阱
用usePermission('post:edit') Hook 返回布尔值看似简洁，但容易忽略两个关键问题：权限数据是否实时、组件是否及时 re-render。
- Hook 内部不能只依赖初始 render 时的权限快照；必须监听 store 变化（如用
useSelector或useStore），否则用户后台被降权，界面不会自动灰掉 - 别把权限判断写成
if (!hasPerm) return null就完事——这样会丢失组件卸载生命周期，可能引发内存泄漏或副作用未清理 - 对异步加载的组件（如
React.lazy），权限校验必须放在加载前（路由守卫层），而不是组件内部；否则白屏几秒后才跳转，体验断裂 - 禁止用
localStorage.getItem('permissions')代替真实状态；它不响应变化，且可能因用户多标签页操作而不同步
权限变更后 DOM 未更新的典型原因和修复方式
不是代码没写对，而是状态流断了。用户换角色后按钮还亮着，大概率是因为权限校验逻辑和 DOM 更新没有绑定在同一响应链上。
- 确保权限判定函数是纯函数，每次调用都接收当前最新权限对象，不捕获外部变量
- 切换角色的 API 成功后，必须显式触发状态更新（如
store.setPermissions(newPerms)），而不是等某个 watch 自动响应 - 避免直接操作
document.querySelectorAll('[data-permission]')再 setAttribute —— 大量 DOM 操作卡顿，且无法触发 React/Vue 的响应式更新；应统一通过状态驱动渲染 - 如果用了
shouldComponentUpdate或memo，记得把权限相关 props 加入依赖判断，否则组件跳过重渲染
v-permission指令，而是让权限状态从登录态、角色变更、接口返回、到 DOM 更新，全程保持一致且不可跳过——任何一环脱钩，UI 就会和真实权限脱节。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
