用Map实现“角色-操作”权限校验矩阵，以角色为键、操作Set为值，支持O(1)查找、动态增删与多角色校验，配合路由守卫和组件级控制实现细粒度权限管理。
用 Map 实现“角色-操作”权限校验矩阵，核心是把角色作为键、该角色允许的操作集合（Set 或数组）作为值，利用 Map 的 O(1) 查找特性完成快速判断。相比嵌套对象或遍历数组，它更轻量、可动态增删、语义清晰。
构建角色-操作映射表
初始化时，将每个角色与其具备的操作列表存入 Map。操作建议用字符串常量（如 "user:edit"、"order:delete"），避免拼写错误和大小写歧义。
- 使用 Set 存储操作，天然去重且支持
has()快速判定 - Map 键统一用字符串角色名（如 "admin"、"editor"），不建议用对象或 Symbol
- 支持运行时动态注册：比如从后端拉取权限配置后，调用
permissionMap.set(role, new Set(actions))
封装校验方法：checkPermission(role, action)
对外只暴露一个简洁函数，内部通过 Map 查角色、再用 Set 查操作，两层 O(1) 完成判断。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 先检查角色是否存在：
if (!permissionMap.has(role)) return false - 再查该角色是否含指定操作：
return permissionMap.get(role).has(action) - 可扩展支持多角色校验：传入角色数组，任一角色满足即返回 true
配合前端路由与组件做细粒度控制
在路由守卫（如 Vue Router 的 beforeEach 或 React 中的 useEffect + useLocation）中调用校验方法，拦截无权访问的页面。
立即学习“前端免费学习笔记（深入）”；
- 按钮级控制：在 JSX/模板中用
{checkPermission('user', 'post:publish') && <button>发布</button>} - 菜单过滤：遍历菜单配置，仅保留当前角色有权限的项
- 避免硬编码角色名：把角色存在全局状态（Pinia/Vuex/Context）或用户信息里，校验时自动读取
注意事项与优化点
Map 本身不响应式，若权限需动态更新（如切换角色），要手动触发视图刷新或结合响应式系统封装。
- 建议用单例模式管理权限 Map，避免多处重复初始化
- 开发阶段可加一层 debug 模式，未命中权限时打印警告，辅助排查漏配
- 若操作量极大（千级以上），可考虑对高频操作建反向索引（如
actionToRolesMap），但多数中后台场景无需
