基于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中调用