vue根據權限生成動態路由及導航菜單

最近在做一個后台管理項目，涉及到一些菜單權限控制，具體實現如下：（話不多說，直接上代碼）

router/index.js

const Home = resolve => require(['@/views/common/Home.vue'], resolve);
const AAA = resolve => require(['@/views/page/AAA.vue'], resolve);
const BBB = resolve => require(['@/views/pages/BBB.vue'], resolve);
const CCC= resolve => require(['@/views/pages/CCC.vue'], resolve);

let routes = [{
    path: '/',
    component: Home,
    name: '首頁',
    redirect: '/AAA',
    hidden: true,
    mate: {
      icon: 'fa fa-home',
      index: 'AAA'
    },
    children: [{
      path: '/AAA',
      component: AAA,
      name: '主頁'
    }]
  }]


//從服務器獲取路由,進行拼接,所有模塊不再以import的形式引入,只能通過require方式加載!
export const makeRoute = function (items) {
  let routes = [];
  for (var i = 0; i < items.length; i++) {
    // console.log(items[i]);
    items[i] = formatRoute(items[i]);
    if (items[i].children) {
      //遞歸處理子路由的component
      items[i].children = makeRoute(items[i].children);
    }
  }
  return items;
}

//格式化路由,使component掛載到路由上,生成addRoutes可用的格式
const formatRoute = (item) => {
  let route = item;
  route.component = eval(route.component);   return route;
}

export default routes;

main.js(登錄成功時，后台返回有權限的路由並存在狀態管理器vuex中)

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import axios from 'axios'

import store from './store'
import routes from './router/index'
import { makeRoute } from './router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  
    //如果目標路由為登陸時,恢復用戶原始狀態
    if (to.path === '/login') {
      window.clearInterval(window.interval);
      store.commit('logOut');
    }
    let allRoutes = store.getters.allRoutes;
    let loginStatus = store.getters.loginStatus;
  
    //登錄成功時加載路由及模塊
    if (from.path === '/login' && allRoutes !== '' && loginStatus) {
      let routesObj = makeRoute(store.getters.allRoutes); router.addRoutes(routesObj);
    }
    //沒有登錄時自動跳轉,開發環境免登陸時注釋
    if ( to.path !== '/login' && (allRoutes === '' || !loginStatus)) {

      if(sessionStorage.getItem('userInfo') === null){  
        next({ path: '/login' })
      } else {  
        //刷新當前頁面
        //重置store參數
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
        store.commit('setUser', userInfo);
        if(userInfo.routes){
          //重新加載路由及模塊
          let routesObj = makeRoute(userInfo.routes);
          router.addRoutes(routesObj);
        }
        next({path: to.path, query: to.query});
      }
    }else{
      //路由的next必須存在,否則無法進入下一頁
      next();
    }
  })

備注：此方案最大的好處是不用再使用require引入每一個組件並掛載到路由