Ant Design Pro of Vue方案一权限路由配置（一步步完成，包括所有后端数据库代码，萌新向）

Ant Design Pro of Vue方案一权限路由配置（一步步完成，包括所有后端数据库代码，萌新向）

参考了许多csdn的文章，感谢大家为社区做的贡献，我也来汇总一波，谢谢😊

首先，给大家看看后端数据库（萌新，建库太拉大佬勿喷）

然后就是第二张表：

这个userRole（我这里默认都是普通用户，所有没涉及角色表，直接0,1区分了，也还没考虑管理员，所以就先只输入了普通用户即把第二张表的 userRole都设为 0 了😁） 负责与两张表关联，permission，就是用户可以访问路由列表（位于前端的 src/config/router.config.js 中）

举个栗子：

把他们（permission）放到第二张表里面就可以了。

前端

1、 把 /src/store/index.js 中的引入改一下（如果要使用官网的方案一）

2、来到 /src/permissions.js（注意别进错，打开src就能看到）

pro版本更迭可能这里(router.beforeEach)会不一样，我在这附上我用的代码

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
  to.meta && typeof to.meta.title !== 'undefined' && setDocumentTitle(`${i18nRender(to.meta.title)} - ${domTitle}`)
  /* has token */
  const token = storage.get(ACCESS_TOKEN)
  if (token) {
    if (to.path === loginRoutePath) {
      next({ path: defaultRoutePath })
      NProgress.done()
    } else {
      // 检验用户的权限表是否为空，我们这里从零开始，他会直接判空并向下执行
      if (store.getters.roles.length === 0) {
        // 请求并获取用户登录信息
        store
          .dispatch('GetInfo')
          .then(res => {
            const roles = res.data.permissions
            store.dispatch('GenerateRoutes', { roles }).then(() => {
              //根据 roles 权限生成可访问的路由表
              //动态添加路由表
              router.addRoutes(store.getters.addRouters)
              const redirect = decodeURIComponent(from.query.redirect || to.path)

              if (to.path === redirect) {
                next({...to, replace: true})
              } else {
                next({path: redirect})
              }
            })
          })
          .catch(() => {
            notification.error({
              message: '错误',
              description: '请求用户信息失败，请重试'
            })
            // 失败时，获取用户信息失败时，调用登出，来清空历史保留信息
            store.dispatch('Logout').then(() => {
              next({ path: loginRoutePath, query: { redirect: to.fullPath } })
            })
          })
      } else {
        next()
      }
    }
  } else {
    if (allowList.includes(to.name)) {
      // 在免登录名单，直接进入
      next()
    } else {
      next({ path: loginRoutePath, query: { redirect: to.fullPath } })
      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
    }
  }
})

注意第 15 行 会调用 GetInfo ，

3、来到 /src/store/modules/user.js，找到 GetInfo 方法

这是我的代码

他会调用 getInfo() 方法请求后端返回数据

GetInfo({ commit }) {
    return new Promise((resolve, reject) => {
        //发起请求获取用户信息
        getInfo().then(response => {
            const user = response.data
            console.log('流程2-获取到个人信息')
			
            、、这些暂时不用我就先注掉了
            // if (result.userRole && result.role.permissions.length > 0) {
            //   //获取不同模块下的权限
            //   const role = result.role
            //   role.permissions = result.role.permissions
            //   //返回一个新的 role 实例
            //   role.permissions.map(per => {
            //     if (per.actionEntitySet != null && per.actionEntitySet.length > 0) {
            //       const action = per.actionEntitySet.map(action => {
            //         return action.action
            //       })
            //       per.actionList = action
            //     }
            //   })
            //   role.permissionList = role.permissions.map(permission => {
            //     return permission.permissionId
            //   })
            //
          	
            
            //注意这里 userRole 一定要有，不然会死循环（好像是）
            commit('SET_ROLES', user.userRole)


            commit('SET_INFO', user)


            // } else {
            //   reject(new Error('getInfo: roles must be a non-null array !'))
            // }

            commit('SET_NAME', { name: user.userName, welcome: welcome() })
            commit('SET_AVATAR', user.avatarUrl)

            resolve(response)
        }).catch(error => {
            reject(error)
        })
    })
},

这里我附带一个我的（主要对应我的代码）前端请求，后端返回的数据格式

这里自己实现就可以了，方法有很多

4、回到 src/permission.js 文件，此时 GetInfo 会将后端返回的数据放到 res（响应） 里面，我们取出data中的permissions const roles = res.data.permissions ,然后，调用 GenerateRoutes

5、进入 /src/store/modules/permission.js 可以看到 GenerateRoutes 方法会 收集到后端返回的 permissions，然后取一份完全的路由模板 routerMap ，进行对比过滤，执行 filterAsyncRouter() ，

我的 filterAsyncRouter()

function filterAsyncRouter(routerMap, roles) {
  const accessedRouters = routerMap.filter(route => {
    // console.log('########$$$$$$$routerMap',roles)
    if (hasPermission(roles, route)) {
      if (route.children && route.children.length) {
        route.children = filterAsyncRouter(route.children, roles)
      }
      return true
    }
    return false
  })
  return accessedRouters
}

过滤完之后，至此，就可以访问到路由并进入首页了

我也是新手，如果有错误的地方、问题，欢迎评论，谢谢大家