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

 下面是permission.ts文件，這個文件只做了一件事，就是根據路由meta對象的某個屬性值，來過濾出來對應值擁有的路由對象，以供addRoutes，直接拿過去用

import { asyncRoutes, constantRoutes } from '@/router'
//判斷是否有權限
function hasPermission(roles, route) {
    if (route.meta && route.meta.identity) {
        return roles.some(role => route.meta.identity.includes(role))
    } else {
        return true
    }
}
//過濾出有權限的路由
export function filterAsyncRoutes(routes, roles) {
    const res: any = []
    routes.forEach(route => {
        const tmp = { ...route }
        if (hasPermission(roles, tmp)) {
            if (tmp.children) {
                tmp.children = filterAsyncRoutes(tmp.children, roles)
            }
            res.push(tmp)
        }
    })
    return res
}
const permission = {
    namespaced: true,
    state: {
        routes: [],
        addRoutes: []
    },
    mutations: {
        SET_ROUTES: (state, routes) => {
            state.addRoutes = routes
　　　　　　　//把之前的路由和后過濾出來的路由拼接起來一個新數組
            state.routes = constantRoutes.concat(routes)
        }
    },
    actions: {
　　　　　//構建路由的函數
        async generateRoutes({ commit }, roles) {
            return new Promise(resolve => {
                let accessedRoutes
                if (roles.includes(5)) {
                    accessedRoutes = asyncRoutes || []
                } else {
                    accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
                }
                commit('SET_ROUTES', accessedRoutes)
                resolve(accessedRoutes)
            })
        }
    },
    getters: {},
}
//導出供使用
export default permission

　　下面是那個倒霉的要被過濾來過濾去的路由數組

const gatewayHomeRouter = [{
  path: '/home',
  component: () => import('@/views/home/Index.vue'),
  children: [
    {
      path: '',
      redirect: 'gateway'
    },
    {
      path: 'gateway',
      name: 'gateway',
      meta: {
        title: '首頁',
        icon: 'el-icon-rank',
        identity: [1, 2, 3, 4, 5]//這就是幾種角色
      },
      component: () => import('@/views/home/gateway/Index.vue')
    },
    {
      path: 'supplierMaintenance',
      name: 'supplierMaintenance',
      meta: {
        title: '供應商基本信息維護',
        icon: 'el-icon-rank',
        identity: [2, 3, 4, 5]
      },
      component: () => import('@/views/home/supplierMaintenance/Index.vue')
    },
    {
      path: 'personnelManagement',
      name: 'personnelManagement',
      meta: {
        title: '供應商人員管理',
        icon: 'el-icon-rank',
        identity: [5]
      },
      component: () => import('@/views/home/personnelManagement/Index.vue')
    },
    {
      path: 'userInfo',
      name: 'userInfo',
      meta: {
        title: '個人信息',
        icon: 'el-icon-rank',
        identity: [2, 3, 4, 5]

      },
      component: () => import('@/views/home/userInfo/Index.vue')
    },
  ]
}]
export default gatewayHomeRouter

　　項目菜單欄也可以遍歷新路由數組生成。。。

       好了，抄完了