基於vue-cli搭建項目中權限

main.js 、login.vue、app.vue

需求： 權限分為A、B、C、D四個權限，分別對應不同的路由，對應不同的菜單，沒有默認的顯示菜單

思路：獲取用戶有哪些權限，路由動態加載；利用的是vue-router中的addRoutes實現的路由動態加載

坑1：在main,js中進行掛載一次，會導致，頁面登錄之后路由沒有被掛載，因為登錄之后,main.js並沒有執行

　　如果在login.vue中只掛載一次的話，會導致,頁面刷新的時候頁面空白，路由沒有被掛載，因為刷新之后，main.js被執行，路由被掛載的還是初始化的router

　　解決：分別在login.vue和main.js中添加動態路由

坑2：使用addRoutes，只是會將路由都添加進去，並沒有判斷是否匹配，是否會重復添加

　　解決：使用router.matcher過濾，已經加載過的路由可以過濾掉

代碼：

（1）初始化的router.js

router.js 初始化的路由文件

const router=  new Router({
  // mode: 'history',
  routes: [
    {
      path: '/login',
      name: 'login',
      component: login,
      meta:{icon:'team',title:'登錄',}
    }
  ],
});

// 去除警告，重復的路由
router.selfaddRoutes = function (params){
  router.matcher = new Router(
  {
    // mode: 'history',
    routes: [
      {
        path: '/login',
        name: 'login',
        component: login,
        meta:{icon:'team',title:'登錄',}
      },
      {
        path:'*',
        name:'no',
        redirect:'/'
      }
    ],
  }
).matcher;
  router.addRoutes(params)
}
export default router;

　（2）根據權限需添加的路由

export default function () {
    // 獲取token 並解析
    const decoded = getSession() && jwt_decode(getSession())
    const { AccessGroups } = decoded && decoded.admin || [];
    let new_route = {
        path: '/',
        name: 'main',
        component: main,
        redirect: {},
        children: []
    }
    // 動態添加路由
    AccessGroups.indexOf(1) > -1 &&  new_route.children.push(A)
    AccessGroups.indexOf(2) > -1 &&  new_route.children.push( B)
    AccessGroups.indexOf(3) > -1 &&  new_route.children.push( C) 
    AccessGroups.indexOf(4) > -1 &&  new_route.children.push( D)
    
    new_route.redirect.name = new_route.children[0].name;
    router.options.routes[1] = new_route
    router.selfaddRoutes([new_route])
}

　　(3)分別在login和main.js中調用