vue-element-admin难点

公司的后台管理系统是以vue-element-admin为模板的，做的过程中，遇到了不少难点，比如登陆鉴权，动态路由，侧边栏生成，网上查了不少资料 ，自己也踩了不少坑，觉得有必要总结一下

先说一下关于路由的处理，vue-element-admin设置了一个全局路由守卫，下边是源码

router.beforeEach(async(to, from, next) => {
  // 进度条启动
  NProgress.start()
  // 设置页面标题
  document.title = getPageTitle(to.meta.title)
  // 确定用户是否已登录
  const hasToken = getToken()

  // 如果已经登录
  if (hasToken) {
    // 在登录状态下，如果还去访问'/login'这个路由
    if (to.path === '/login') {
      // 就会重定向到主页
      next({ path: '/' })
      // 进度条完成
      NProgress.done()
    } else {
      // 如果已经登录的状态下，访问的不是'/login'这个路由，那么就要确定登录用户是否已通过getInfo获得其权限角色
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      // 如果已经获得了权限角色，就正常访问要访问的路由
      if (hasRoles) {
        next()
      } else {
        // 如果没有获取权限角色
        try {
          // 获取用户权限角色
          // 注意：角色必须是对象数组！例如：['admin']或，['developer'，'editor']
          const { roles } = await store.dispatch('user/getInfo')

          // 基于角色生成可访问路由图
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

          // 动态添加可访问路由
          router.addRoutes(accessRoutes)

          // 确保addRoutes完整的hack方法
          // 设置replace:true，这样导航就不会留下历史记录
          next({ ...to, replace: true })
        } catch (error) {
          // 在获取角色，动态生成可访问路由的过程中，如果出现异常就会访问'/login?redirect=${to.path}'这个路由
          // 其实就是会访问登录页面，然后重新登录，登录成功后，直接跳转到'to.path'这个页面
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* 未登录状态下*/
    if (whiteList.indexOf(to.path) !== -1) {
      // 如果要访问的路由，是在免登录的白名单中，那就可以直接访问
      next()
    } else {
      // 没有访问权限的其他页将重定向到登录页。
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

大体的意思是，当我们访问任意路由时，vue-element-admin都会通过router.beforeEach这个全局路由守卫来拦截，然后从Cookie中获取token,这里会分为两种情况

• token存在
  token存在的情况下，就会根据用户角色，生成动态路由，然后把动态路由和静态路由组合成可访问路由，然后访问要访问的路由，这里会有一个特殊的情况，那就是登录状态下，我们还去访问/login这个登录页面，那么就会重定向到/这个根路由，原因是已经登录了，没有必要再去登录一遍
• token不存在
  token不存在的情况下呢，要判断 一下我们要访问的路由是不是在白名单中，如果在，那就直接可以访问了，如果不在白名单中，就说明需要我们先登录，那就会跳转到登录页面，这个时候，会把我们要访问的路由，作为参数，跟/login组合到一起,也就是/login?redirect=${to.path}这种形式

另外一个难点就是动态路由的生成了，我们公司是直接根据用户角色动态返回该角色对应的路由表，这跟vue-element-admin源代码里的还是有些区别的，vue-element-admin里的思路是下边这样的

1. 创建vue实例的时候将vue-router挂载，但这个时候vue-router挂载一些登录或者不用权限的公用的页面。
2. 当用户登录后，获取用role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。
   这个路由表由两部分组成，一部分是router.js里定义的constantRoutes，另外一部分是router.js定义的asyncRoutes的过滤后的结果
3. 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。
4. 使用vuex管理路由表，根据vuex中可访问的路由渲染侧边栏组件

具体细节如下

 // 先拿到用户角色权限
const { roles } = await store.dispatch('user/getInfo')
 // 基于角色生成可访问路由图
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

• 我们看下generateRoutes这个函数的逻辑

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      // 先声明一个变量，作为可访问路由数组
      let accessedRoutes
      // 判断登录用户的角色数组是否包含admin,如果包含
      if (roles.includes('admin')) {
        // 直接把异步路由赋值给可访问路由数组
        accessedRoutes = asyncRoutes || []
      } else {
        // 如果当前登录用户的角色数组，不包含admin,那么就调用'filterAsyncRoutes'方法
        // 这个方法会根据用户角色数组，结合asyncRoutes这个异步路由里每一项的角色设置，来过滤asyncRoutes这个异步路由
        // 举个例子，登录用户的角色是editor,而asyncRoutes里有A和B两个路由，A路由的meta里定义的roles是admin,而B路由的meta里定义的roles是editor，那么过滤后的asyncRoutes就只包含B路由
        // 最后把过滤后的路由赋值给可访问路由数组
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      // 然后调用SET_ROUTES，把可访问路由存入vuex来管理
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

• 再来看下 filterAsyncRoutes这个函数的逻辑

// 把定义好的异步路由和登录用户的角色数组作为参数传进来
export function filterAsyncRoutes(routes, roles) {
  const res = []
  // 遍历异步路由
  routes.forEach(route => {
    // 浅拷贝异步路由的每一项
    const tmp = { ...route }
    // 调用hasPermission这个方法，对比登录用户的角色和异步路由里的每一个路由的meta里的roles是否有重合
    // 如果有重合，证明用户有权限访问这个路由，那么就把这个路由放入res
    if (hasPermission(roles, tmp)) {
      // 如果该路由可以被登录用户访问，那么就要看一下这个路由是否还有子路由
      if (tmp.children) {
        // 如果有子路由，那么就把子路由也通过filterAsyncRoutes这个函数来过滤一下，把没有权限的路由剔除，有权限访问的路由保存下来并更新当前路由的子路由
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })
  // 最后把过滤后的路由，也就是当前用户角色可以访问的路由的数组返回
  return res
}

• hasPermission这个函数的逻辑就比较简单了

// 它的参数是 登录用户的角色数组，和异步路由数组种的其中一个路由
function hasPermission(roles, route) {
  // 如果异步路由数组种的其中一个路由包含了meta，并且meta定义了roles
  if (route.meta && route.meta.roles) {
    // 就遍历登录用户的角色数组，如果路由的meta.roles里定义的角色跟登录用户的角色数组有重合，就返回true
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    // 如果被遍历到的异步路由数组种的其中一个路由，没有定义meta，或者没有定义meta.roles那么就直接返回true
    // 这种情况，说明该路由是一个通用路由，所有的角色都可以访问
    return true
  }
}