vue-router 实现动态路由加载，权限管理

//先导入这些乱七八糟的
import Vue from ‘vue‘
import Router from ‘vue-router‘
import store from ‘@/store/index‘
import NProgress from ‘nprogress‘
import ‘nprogress/nprogress.css‘
import gatewayHomeRouter from ‘./gatewayHome‘
Vue.use(Router)
//不需要权限的路由
export const constantRoutes = [
  {
    path: ‘/‘,
    redirect: ‘/entrance‘
  },
  {
    path: ‘/entrance‘,
    component: () => import(‘@/views/Index.vue‘),
    meta: { isEntrance: true }
  },
  {
    path: ‘/register‘,
    name: ‘register‘,
    component: () => import(‘@/views/common/Register.vue‘)
  },
  {
    path: ‘/login‘,
    name: ‘login‘,
    component: () => import(‘@/views/common/Login.vue‘)
  },
  {
    path: ‘/logout‘,
    name: ‘logout‘,
    component: () => import(‘@/views/common/Logout.vue‘)
  },
  {
    path: ‘/quit‘,
    name: ‘quit‘,
    component: () => import(‘@/views/common/Quit.vue‘)
  },
  {
    path: ‘/error/:id‘,
    name: ‘404‘,
    component: () => import(‘@/views/common/404.vue‘)
  },
  {
    path: ‘/Admittance‘,
    name: ‘Admittance‘,
    component: () => import(‘@/views/common/Admittance.vue‘)
  },
  // gatewayHomeRouter
]
export const asyncRoutes = gatewayHomeRouter
const createRouter = () => new Router({
  mode: ‘history‘,
  base: process.env.BASE_URL,
  routes: constantRoutes
})

const router: any = createRouter()
//写一个重置路由的方法，切换用户后，或者退出时清除动态加载的路由
export function resetRouter() {
  const newRouter: any = createRouter()
  router.matcher = newRouter.matcher // 新路由实例matcer，赋值给旧路由实例的matcher，（相当于replaceRouter）
}
//不需要权限的白名单path
const whiteList = [‘/entrance‘, ‘/register‘, ‘/login‘, ‘/logout‘, ‘/error‘, ‘/Admittance‘, ‘/quit‘]
router.beforeEach(async (to, from, next) => {
  NProgress.start()
　//登录后的用户有token
  const hasToken = sessionStorage.getItem(‘Authorization‘)
  //注销后的用户的识别
  let isEffect = store.state.isEffect
  if (isEffect === ‘0‘) {
    if (to.path !== ‘/quit‘) {
      next(‘/quit‘)
    }
  }
  if (hasToken) {

    if (to.path === ‘/login‘) {
      // 已登录的用户，想去登录页就重定向到首页
      next({ path: ‘/‘ })
      NProgress.done()
    } else {
      if (store.state.isMountedRoutes) {
        if (to.path === ‘/entrance‘) {
          next(‘/home‘)
        }
        next()
      } else {
        try {
　　　　　　//登录后获取用户角色
          const { roleTypeDetail } = await store.dispatch(‘COMMIT_USER_LOGIN‘)
          let roles: any = [Number(roleTypeDetail)]
　　　　　　//根据角色遍历出来对应可以显示的路由
          const accessRoutes = await store.dispatch(‘permission/generateRoutes‘, roles)
　　　　　　//通过addRoutes加载路由
          router.addRoutes(accessRoutes)
　　　　　　//存储已加载的状态，下次就不会进入这个try
          store.commit(‘SET_IS_MOUNTED_ROUTES‘, true)
          NProgress.done()
          next({ path: to.path })
        } catch (error) {
          // 清除token重新跳转登录页
          // await store.dispatch(‘user/resetToken‘)
          store.dispatch(‘COMMIT_LOGOUT‘)
          next(`/login`)
          NProgress.done()
        }
      }
    }
  } else {
    //白名单直接里边请
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      // 其他无权限的重定向到登录页
      next(`/login`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done()
})

export default router