VUE中权限+动态路由加载+配置，理论与实践！

哈喽大家好，今天我们来探讨vue开发过程中，最不可避免的过程。尤其是开发后台管理系统，其中有很多的角色需要用来做判断。不同的角色有着不同的权限。作为管理员还必须拥有修改这些权限的能力。

这样的操作无疑会使得前端做路由的加载时显得更为复杂。我司的角色有包括管理员在内总共6种。所以我将自己在开发过程中遇到的问题整理起来。仅做参考，希望对大家有帮助！

思路

1.先从最高权限下手，把项目所有需要做动态分配的路由都保存到后台服务器。(可能会有人说放在后端就遏制住前端的处理了，但是根据我们目前的情况，放在后台更方便处理)。

2.利用后台存放的数据，做成菜单树。然后给每一个想要获取权限的角色分配权限，达到每一个角色都拥有自定义权限。

3.给创建成的不同用户分配角色，达到权限的动态分配。

我司的处理情况特殊，也就是给不同的角色来划分权限

4.当用户登录时，获取当前用户所在角色组，利用角色返回配置的路由信息，然后将信息加载到vue-router中，实现不同用户||角色登录进系统后，显示不同的路由菜单。

业务代码

1.用户登录以后，在cookie存放后台返回的Token||sessionID。

login(userInfo).then(res => {
   
        if (res.code == 600) {
   
          resolve(res)
          return
        }
        commit('SET_TOKEN', res.res);
        setToken(res.res);
        resolve(res)
      })

2.在路由守卫中，我们做判断。如果有我们要的cookie，那么就让继续加载路由。处理相关事宜，这块如有不懂。后期我会单独抽出来做一次vue路由守卫的理解。

 // 确定用户是否已登录
  const hasToken = store.getters.token;
  if (hasToken) {
   
    if (to.path === '/login') {
   
      // 如果已登录，则重定向到主页
      next({
   
        path: '/'
      })
      NProgress.done()
    } else {
   
      // 确定用户是否通过getInfo获得了他的权限角色
      const hasRoles = store.getters.roles && store.getters.roles.length > 0;
      if (hasRoles) {
   
        next()
      } else {
   
        try {
   
         /*
              主要的操作在第三步
         */
        } catch (error) {
   
          // 删除token，进入登录页面重新登录
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next