ant-design-vue-pro中的权限系统：动态权限与菜单生成实现

【免费下载链接】ant-design-vue-pro 项目地址: https://gitcode.com/gh_mirrors/antd/ant-design-vue-pro

你是否在开发后台管理系统时遇到过权限控制混乱、菜单展示与用户角色不匹配的问题？ant-design-vue-pro的权限系统通过动态权限验证和菜单生成机制，完美解决了这些痛点。本文将深入解析其实现原理，帮助你快速掌握这一核心功能。

权限系统整体架构

ant-design-vue-pro的权限系统采用前后端结合的方式，实现了细粒度的权限控制和动态菜单生成。系统主要包含两大核心模块：权限验证模块和动态路由生成模块。

权限验证模块负责判断用户是否拥有特定操作的权限，而动态路由生成模块则根据用户的角色权限动态构建可访问的菜单和路由。这两个模块协同工作，确保用户只能看到和操作其权限范围内的功能。

核心实现文件包括：

• 权限验证：src/core/permission/permission.js
• 动态路由：src/store/modules/async-router.js
• 路由生成：src/router/generator-routers.js
• 路由配置：src/config/router.config.js

权限验证机制

权限验证是权限系统的基础，ant-design-vue-pro定义了一套完整的权限验证机制，包括权限枚举、权限指令和权限判断逻辑。

权限枚举定义

系统首先定义了常用的权限操作枚举，如新增、删除、修改等，这些枚举在src/core/permission/permission.js中定义：

export const PERMISSION_ENUM = {
  'add': { key: 'add', label: '新增' },
  'delete': { key: 'delete', label: '删除' },
  'edit': { key: 'edit', label: '修改' },
  'query': { key: 'query', label: '查询' },
  'get': { key: 'get', label: '详情' },
  'enable': { key: 'enable', label: '启用' },
  'disable': { key: 'disable', label: '禁用' },
  'import': { key: 'import', label: '导入' },
  'export': { key: 'export', label: '导出' }
}

权限指令实现

系统通过Vue插件的方式，在Vue原型上挂载了$auth方法，方便在组件中进行权限判断：

function plugin (Vue) {
  !Vue.prototype.$auth && Object.defineProperties(Vue.prototype, {
    $auth: {
      get () {
        const _this = this
        return (permissions) => {
          const [permission, action] = permissions.split('.')
          const permissionList = _this.$store.getters.roles.permissions
          return permissionList.find((val) => {
            return val.permissionId === permission
          }).actionList.findIndex((val) => {
            return val === action
          }) > -1
        }
      }
    }
  })
}

在组件中使用方式如下：

<a-button v-if="$auth('form.edit')">编辑</a-button>

动态路由生成

动态路由生成是权限系统的另一个核心功能，它根据用户的权限动态构建路由和菜单，实现不同角色看到不同菜单的需求。

路由生成流程

1. 用户登录成功后，系统调用GenerateRoutes action获取用户菜单权限
2. 后端返回用户可访问的菜单列表
3. 前端将菜单列表转换为树形结构
4. 根据树形菜单结构生成对应的路由配置
5. 将生成的路由添加到路由表中

核心实现代码在src/store/modules/async-router.js中：

const permission = {
  state: {
    routers: constantRouterMap,
    addRouters: []
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers
      state.routers = constantRouterMap.concat(routers)
    }
  },
  actions: {
    GenerateRoutes ({ commit }, data) {
      return new Promise((resolve, reject) => {
        const { token } = data
        generatorDynamicRouter(token).then(routers => {
          commit('SET_ROUTERS', routers)
          resolve()
        }).catch(e => {
          reject(e)
        })
      })
    }
  }
}

菜单树生成

菜单树生成是动态路由的关键步骤，系统通过listToTree方法将扁平的菜单列表转换为树形结构：

const listToTree = (list, tree, parentId) => {
  list.forEach(item => {
    // 判断是否为父级菜单
    if (item.parentId === parentId) {
      const child = {
        ...item,
        key: item.key || item.name,
        children: []
      }
      // 迭代 list，找到当前菜单相符合的所有子菜单
      listToTree(list, child.children, item.id)
      // 删掉不存在 children 值的属性
      if (child.children.length <= 0) {
        delete child.children
      }
      // 加入到树中
      tree.push(child)
    }
  })
}

路由格式化

树形菜单生成后，系统调用generator方法将树形菜单转换为Vue Router需要的路由配置：

export const generator = (routerMap, parent) => {
  return routerMap.map(item => {
    const currentRouter = {
      // 路由地址
      path: item.path || `${(parent && parent.path) || ''}/${item.key}`,
      // 路由名称
      name: item.name || item.key || '',
      // 路由组件
      component: constantRouterComponents[item.component || item.key] || (() => import(`@/views/${item.component}`)),
      // 路由元信息
      meta: {
        title: title,
        icon: icon || undefined,
        hiddenHeaderContent: hiddenHeaderContent,
        target: target,
        permission: item.name
      }
    }
    // 递归处理子菜单
    if (item.children && item.children.length > 0) {
      currentRouter.children = generator(item.children, currentRouter)
    }
    return currentRouter
  })
}

路由配置与权限控制

ant-design-vue-pro的路由配置中包含了权限控制信息，通过在路由的meta字段中添加permission属性，可以指定访问该路由所需的权限。

路由配置示例

在src/config/router.config.js中定义了系统的路由结构：

export const asyncRouterMap = [
  {
    path: '/',
    name: 'index',
    component: BasicLayout,
    meta: { title: 'menu.home' },
    redirect: '/dashboard/workplace',
    children: [
      // dashboard
      {
        path: '/dashboard',
        name: 'dashboard',
        redirect: '/dashboard/workplace',
        component: RouteView,
        meta: { title: 'menu.dashboard', keepAlive: true, icon: bxAnaalyse, permission: ['dashboard'] },
        children: [
          {
            path: '/dashboard/analysis/:pageNo([1-9]\\d*)?',
            name: 'Analysis',
            component: () => import('@/views/dashboard/Analysis'),
            meta: { title: 'menu.dashboard.analysis', keepAlive: false, permission: ['dashboard'] }
          },
          {
            path: '/dashboard/workplace',
            name: 'Workplace',
            component: () => import('@/views/dashboard/Workplace'),
            meta: { title: 'menu.dashboard.workplace', keepAlive: true, permission: ['dashboard'] }
          }
        ]
      }
      // 更多路由...
    ]
  }
]

在上述配置中，meta.permission字段指定了访问该路由所需的权限，只有拥有相应权限的用户才能访问该路由。

权限系统工作流程

综合上述各模块，ant-design-vue-pro的权限系统工作流程如下：

1. 用户登录系统，获取用户token
2. 系统使用token调用后端接口，获取用户权限信息和可访问菜单列表
3. 将用户权限信息存储到Vuex中
4. 根据菜单列表动态生成路由配置
5. 将生成的路由添加到路由表中，实现菜单的动态展示
6. 在组件中使用$auth方法判断用户是否拥有某项操作权限，控制按钮等元素的显示

总结

ant-design-vue-pro的权限系统通过权限验证和动态路由两大核心模块，实现了细粒度的权限控制和动态菜单生成。系统设计灵活，可根据实际需求进行扩展和定制。

主要特点包括：

• 基于角色的权限控制，不同角色拥有不同权限
• 细粒度的操作权限控制，可控制到按钮级别
• 动态菜单生成，根据用户权限动态展示可访问菜单
• 灵活的权限配置，支持权限的动态修改

通过本文的介绍，相信你已经对ant-design-vue-pro的权限系统有了深入的了解。在实际项目开发中，可以根据具体需求对权限系统进行定制和扩展，以满足不同场景的权限需求。

要开始使用ant-design-vue-pro，你可以通过以下命令获取项目代码：

git clone https://gitcode.com/gh_mirrors/antd/ant-design-vue-pro

获取代码后，参考项目文档进行安装和配置，即可快速搭建一个拥有完善权限系统的后台管理系统。

【免费下载链接】ant-design-vue-pro 项目地址: https://gitcode.com/gh_mirrors/antd/ant-design-vue-pro