element ui的vue-element-admin后台集成方案

路由权限校验

路由配置文件 src/router/index.js，找到asyncRoutes这个数组，在需要配置权限的路由上添加meta属性，meta是一个对象，meta对象上添加roles属性，roles是一个数组，里面可以放admin、editor两个角色。

export const asyncRoutes = [
  { path: '/book',
    component: Layout,
    redirect: '/book/create',
    meta: { title: '图书管理', icon: 'documentation', roles: ['admin'] },
    children: [
      {
        path: '/book/create',
        component: () => import('@/views/book/create'),
        meta: { title: '上传图书', icon: 'edit', roles: ['admin'] },
      }
    ] 
  },
  { path: '*', redirect: '/404', hidden: true }
]

浏览器访问某个路由的时候，首先会进入一个全局的路由守卫 router.beforeEach，这部分代码在src/permission.js文件里。以下步骤是路由守卫里执行的一系列逻辑步骤：

router.beforeEach(async(to, from, next) => {
  // 启动进度条
  NProgress.start()
 
  // 设置页面title
  document.title = getPageTitle(to.meta.title)
 
  // 从cookie中获取token
  const hasToken = getToken()
 
  // 判断token是否存在
  // token存在
  if (hasToken) {
    // 判断路由是否为 /login
    // 是 /login
    if (to.path === '/login') {
      // 路由重定向到 /
      next({ path: '/' })
      NProgress.done()
    } else {
      //  获取用户角色
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      // 如果角色存在则进行下一步
      if (hasRoles) {
        next()
      } else {
      // 如果角色不存在
        try {
          // 获取角色
          const { roles } = await store.dispatch('user/getInfo')
 
          // 根据roles生成动态路由
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
 
          // 合并路由
          router.addRoutes(accessRoutes)
 
          // replace设置成true 为的是让用户登录进去之后点击浏览器回退，会退到空白页而不是登录页
          next({ ...to, replace: true })
        } catch (error) {
          // 如果出现异常 把token清空 roles清空 cookie清空
          await store.dispatch('user/resetToken')
          // 打印错误
          Message.error(error || 'Has Error')
          // 重定向到login 并带上上次访问的路由
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* 如果token不存在 */
    // 如果路由存在白名单里
    if (whiteList.indexOf(to.path) !== -1) {
      // 那就访问此路由
      next()
    } else {
      // 如果路由不存在白名单里，那就跳转到登录页 并带上上次访问的路由
      next(`/login?redirect=${to.path}`)
      // 结束滚动条
      NProgress.done()
    }
  }
})
 
router.afterEach(() => {
  // 结束滚动条
  NProgress.done()
})

流程图：

官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/。
学习更多：https://www.oschina.net/p/vue-element-admin?hmsr=aladdin1e1。