Vue动态添加路由(addRoutes) 校验用户是否登录且排除白名单页面

Vue动态添加路由
通过官方路由API router.addRoutes 实现。
废话不多说直接上代码，欢迎留言交流!

const whiteList = ['/login', '/reset-password'] // 可直接访问的白名单页面
router.beforeEach(async(to, from, next) => {
  // 确定用户是否已登录
  const hasToken = getToken() // 拿到用户登录的token
  if (hasToken) {
    if (to.path === '/login') {
      // 如果已登录，则重定向到主页
      next({ path: '/' })
    } else {
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next()
      } else {
        try {
          // 获取用户信息，存储到vuex
          await store.dispatch('user/getInfo')
          // 动态获取用户可访问的路由列表
          const accessRoutes = await store.dispatch('permission/generateRoutes')
          // 动态关联组件地址（见generator.js模块）
          const routesList = generator(accessRoutes)
          // 注意：path: '*'需要动态追加，解决刷新页面默认跳转到404
          routesList.push({ path: '*', redirect: '/404', hidden: true })
          router.addRoutes(routesList)
          next({ ...to, replace: true })
        } catch (error) {
          // 删除令牌并转到登录页重新登录
          await store.dispatch('user/resetToken')
          Message.error(error || '错误')
          next(`/login?redirect=${to.path}`)
          // NProgress.done()
        }
      }
    }
  } else {
    /* 没有令牌 */

    if (whiteList.indexOf(to.path) !== -1) {
      // 在登录白名单中，直接进入
      next()
    } else {
      // 其他没有访问权限的页面将被重定向到登录页面。
      next(`/login?redirect=${to.path}`)
      // NProgress.done()
    }
  }
})

generator.js

import Layout from '@/layout' // 布局组件
// 前端路由表
const constantRouterComponents = {
  Layout: Layout,
  Home: () => import('@/views/home/index')
}
export function generator(routerMap=[]) {
  return router.map(item => {
    item.component: (constantRouterComponents[item.component || item.key]) || (() => import(`@/views/${item.component}`)) // 通过自定义组件名称关联组件
    if (item.children && item.children.length > 0) {
      item.children = generator(item.children)
    }
    return item
  })
}