Ant Design Vue Pro权限路由配置

Ant Design Vue Pro后台管理项目本身已经写好了路由配置，只要根据自己项目角色返回的数据稍加修改就可以实现。
在src\config\router.config.js文件中虽然配置了权限：
在这里插入图片描述
但是在src\permission.js路由拦截文件中roles判断是否等于res.result && res.result.role，所以此时所有页面都可展示：

在这里插入图片描述
在实际的项目中根据需要登录成功后路由拦截可改为：

if (to.path === '/user/login') {
      next({ path: '/dashboard/workplace' })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) {
        store
          .dispatch('GetInfo')
          .then(res => {
               const roles = res.data.roleCode=='SH'?[ 'SH' ]:[ 'KG' ]
                store.dispatch('GenerateRoutes', { roles }).then(() => {
                  console.log(store.getters.addRouters)
                  router.addRoutes(store.getters.addRouters)
                  next({ ...to, replace: true })
                }) 
          })
          .catch(() => {
            notification.error({
              message: '错误',
              description: '请求用户信息失败，请重试'
            })
            store.dispatch('Logout').then(() => {
              next({ path: '/user/login', query: { redirect: to.fullPath } })
            })
          })
      } else {
        next()
      }
    }

相应的路由：
在这里插入图片描述
src\permission.js的路由拦截是引用的src\store\modules\permission.js中GenerateRoutes方法，src\store\modules\permission.js文件中引入了可筛选路由（asyncRouterMap）和基础路由（constantRouterMap ）

import { asyncRouterMap, constantRouterMap } from '@/config/router.config'

然后在hasPermission方法中过滤账户是否拥有某一个权限，
在这个文件中需要修改和注意的点就是filterAsyncRouter方法，
需要根据src\permission.js传过来的roles结构做出相应的修改：
在这里插入图片描述

Ant Design Vue Pro权限路由配置

猜你喜欢