用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 模式，未命中权限时打印警告，辅助排查漏配
• 若操作量极大（千级以上），可考虑对高频操作建反向索引（如 actionToRoles Map），但多数中后台场景无需

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！