用 set 实现高性能权限校验，依托其唯一性和 o(1) has() 查询，适用于前端路由守卫、按钮显隐等场景；初始化时将后端数组转为 set，多角色权限用展开运算符合并，动态更新需批量操作并配合响应式方案。
用 Set 实现高性能权限位校验，核心在于发挥其唯一性保障和O(1) 时间复杂度的 has() 查询能力，替代数组 includes() 的 O(n) 遍历。它不负责加密或强安全控制，而是为前端路由、按钮显隐、操作拦截等场景提供轻量、实时、可维护的本地校验基础。
权限数据初始化：从数组到 Set 一步到位
后端返回的权限标识通常是字符串数组，如 ["user:read", "user:edit", "order:export"]。不要直接在组件或状态中保留原始数组：
- 收到权限列表后立即构建
new Set(permArr) - 挂载到用户上下文对象上，例如
user.permissions = new Set(permArr) - 后续所有增删都只调用
.add()或.delete()，天然去重、无副作用
多角色合并：用 Set 组合而非拼接数组
一个用户可能拥有多个角色（如“运营”+“财务”），每个角色对应一组权限。若用数组 concat 再去重，易出错且低效；用 Set 可语义清晰、性能稳定：
- 预先定义角色权限集：
const roleOps = { admin: new Set(["*:*"]), editor: new Set(["post:read", "post:publish"]) } - 合并时直接构造新 Set：
user.permissions = new Set([...roleOps.editor, ...roleOps.audit]) - 无需手动过滤重复项，交集/并集逻辑也容易扩展（如用辅助函数
union(...sets)）
运行时校验：路由守卫与按钮控制直连 has()
权限判断应尽可能靠近使用点，避免中间封装层损耗性能或增加耦合：
- Vue 路由守卫中：
if (!user.permissions.has(to.meta.permission)) next('/403') - React 按钮渲染：
{user.permissions.has('order:delete') && <button onclick="{handleDelete}">删除</button>} - 指令式校验（如 API 调用前）：
if (!user.permissions.has('report:generate')) throw new Error('无权限')
动态更新：响应式同步权限变更
用户在系统内被授予权限或调整角色时，需保证本地 Set 实时准确。关键点是批量操作 + 响应式触发：
- 监听权限变更事件（如 WebSocket 收到
{ added: ["log:download"], removed: ["user:edit"] }） - 批量更新 Set：
payload.added.forEach(p => user.permissions.add(p)); payload.removed.forEach(p => user.permissions.delete(p)) - 若用 Vue 3，将 Set 包裹在
ref()或reactive()中；React 中建议用useReducer或 Zustand 等管理该状态，确保视图重渲染
敏感操作（如删除、转账、导出全量数据）必须保留后端二次校验，前端 Set 仅用于体验优化和快速拦截——它快，但不代替信任。
