资讯详情

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

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

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

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

 

整体数据流

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

 

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

  admin: {
    id: '1',
    name: '管理员',
    code: 'admin',
    description: '拥有系统高级权限',
    permissions: [
      'dashboard:view',
      'user:view', 'user:create', 'user:edit', 'user:delete',
      'system:view',
      'role:view', 'role:create', 'role:edit', 'role:delete',
      'menu:view', 'menu:create', 'menu:edit', 'menu:delete',
      'log:view',
      'document:view', 'document:create', 'document:edit', 'document:delete'
    ],
    createdAt: '2024-01-01T00:00:00.000Z',
    updatedAt: '2024-01-01T00:00:00.000Z'
  }

 

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

1. 封装一个自定义 usePermission Hook

// 权限检查 Hook
export const usePermission = () => {
  const { user, permissions, hasPermission, hasAnyPermission } = useAuthStore()
  
  return {
    user,
    permissions,
    can: (permission: string) => hasPermission(permission),
    canAny: (permissionList: string[]) => hasAnyPermission(permissionList),
  }
}

// 检查单个权限
export const checkPermission = (permission: string): boolean => {
  const { hasPermission } = useAuthStore.getState()
  return hasPermission(permission)
}

// 检查多个权限（满足任一即可）
export const checkAnyPermission = (permissions: string[]): boolean => {
  const { hasAnyPermission } = useAuthStore.getState()
  return hasAnyPermission(permissions)
}

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

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