rbacAccessPlugin - 权限控制

什么是 rbacAccessPlugin？

rbacAccessPlugin 是一个基于角色的访问控制（RBAC）插件。它可以根据用户的角色和权限来控制用户对系统资源的访问，确保只有授权用户才能访问特定的功能和页面。我们提供了前端权限控制模式和后端权限控制模式。

前端权限控制

import { rbacAccessPlugin } from '@pro/router'

const router = createRouter({
  // ... 其他配置
  plugins: [
    rbacAccessPlugin({
      service: async () => {
        return {
          /**  以下为必填参数  */
          mode: 'frontend', // 权限模式为前端权限控制
          roles: [], // 当前用户角色，如果为空，不过滤路由
          routes: [], // 需要动态生成的路由列表，会根据角色过滤路由
          logined: true, // 是否已登录

          /** 以下为选填参数  */
          homePath: '/home', // 首页路径，登录后会跳转到此路径，默认为 '/home'，可在这里控制不同用户跳转不同的首页地址
          loginPath: '/login', // 登录路径，未登录会跳转到此路径，默认为 '/login'
          parentNameForAddRoute: 'Root', // 添加路由时的父级路由名称，设置后使用 router.addRoute('Root',routes)，默认使用 router.addRoute(routes)
          onRoutesBuilt: (routes) => {
            console.log(routes) // 路由构建完成后回调，routes 为最终的 vue-router 路由
          }
        }
      }
    })
  ]
})

在路由中配置权限

const routes = [
  {
    path: '/login',
    component: Login,
    meta: {
      requiresAuth: false, // 不需要权限控制，访问该路由时不需要登录
    }
  },
  {
    path: '/users',
    component: Users,
    meta: {
      roles: ['admin', 'manager'] // 当前路由可以被哪些角色访问，如果为空，则表示所有角色都可以访问
    }
  }
]

后端权限控制

import { rbacAccessPlugin } from '@pro/router'

const router = createRouter({
  // ... 其他配置
  plugins: [
    rbacAccessPlugin({
      service: async () => {
        return {
          /**  以下为必填参数  */
          mode: 'backend', // 权限模式为后端权限控制
          logined: true, // 是否已登录
          fetchRoutes: () => {
            // 这里需返回要被动态生成的路由列表
            return http('/api/fetch-menus').then(res => res.data)
          },
          resolveComponent: (component) => {
            // 这里需要将字符串的 component 解析成组件并返回
            // 这里的 pageMap 可以用 import.meta.glob 匹配，具体请看 Admin routes 文件
            return pageMap[component]
          },

          /** 以下为选填参数  */
          homePath: '/home', // 首页路径，登录后会跳转到此路径，默认为 '/home'，可在这里控制不同用户跳转不同的首页地址
          loginPath: '/login', // 登录路径，未登录会跳转到此路径，默认为 '/login'
          parentNameForAddRoute: 'Root', // 添加路由时的父级路由名称，设置后使用 router.addRoute('Root',routes)，默认使用 router.addRoute(routes)
          onRoutesBuilt: (routes) => {
            console.log(routes) // 路由构建完成后回调，routes 为最终的 vue-router 路由
          }
        }
      }
    })
  ]
})

插件配置选项

详见 Admin 源码或以上案例，有详细注释

路由 Meta 配置选项

选项	类型	默认值	说明
roles	string[]	-	选填，当前路由可以被哪些角色访问，如果为空，则表示所有角色都可以访问，只在前端权限控制模式下有效
requiresAuth	boolean	true	选填，是否需要权限控制，如果为 false，则表示不需要权限控制，访问这些路由时不需要登录