【项目实践】—— 如何实现RBAC权限管理系统-拓冰建站

在大型项目中，权限管理是一个非常重要的部分，它可以保证系统的安全性，防止未授权的访问和操作。

RBAC 全称 Role-Based Access Control，基于角色的访问控制，是目前企业后台、SaaS 系统通用标准权限模型，核心思想：用户不直接绑定权限，通过「角色」中间层间接授权。

链路：用户 User ---> 角色 Role ---> 权限 Permission

role

数据库表之间的关系如图所示：

整体数据流

用户登录 → 后端校验账号密码，返回 Token
前端携带 Token 请求 /getUserInfo 接口
后端根据用户 ID 查询关联角色 → 角色绑定的所有权限标识数组
后端返回：用户信息、角色列表、权限 perms 数组、动态菜单路由
前端存储权限数组，统一做路由拦截、按钮显隐控制

例：角色（Role）返回的信息，包括角色绑定的权限标识数组（permissions）

 1   admin: {
 2     id: '1',
 3     name: '管理员',
 4     code: 'admin',
 5     description: '拥有系统高级权限',
 6     permissions: [
 7       'dashboard:view',
 8       'user:view', 'user:create', 'user:edit', 'user:delete',
 9       'system:view',
10       'role:view', 'role:create', 'role:edit', 'role:delete',
11       'menu:view', 'menu:create', 'menu:edit', 'menu:delete',
12       'log:view',
13       'document:view', 'document:create', 'document:edit', 'document:delete'
14     ],
15     createdAt: '2024-01-01T00:00:00.000Z',
16     updatedAt: '2024-01-01T00:00:00.000Z'
17   }

前端权限控制的实现（基于React框架）

1. 封装一个自定义 usePermission Hook

 1 // 权限检查 Hook
 2 export const usePermission = () => {
 3   const { user, permissions, hasPermission, hasAnyPermission } = useAuthStore()
 4   
 5   return {
 6     user,
 7     permissions,
 8     can: (permission: string) => hasPermission(permission),
 9     canAny: (permissionList: string[]) => hasAnyPermission(permissionList),
10   }
11 }
12 
13 // 检查单个权限
14 export const checkPermission = (permission: string): boolean => {
15   const { hasPermission } = useAuthStore.getState()
16   return hasPermission(permission)
17 }
18 
19 // 检查多个权限（满足任一即可）
20 export const checkAnyPermission = (permissions: string[]): boolean => {
21   const { hasAnyPermission } = useAuthStore.getState()
22   return hasAnyPermission(permissions)
23 }

在具体页面中调用这个 Permission Hook，来实现页面的访问控制

1   const { can } = usePermission()
2   const canEdit = can('user:edit') // 只有具有编辑权限的用户才能编辑用户信息
3   const canDelete = can('user:delete') // 只有具有删除权限的用户才能删除用户