首页 > 其他 > 详细

基于vue-cli搭建项目中权限

时间:2019-12-06 12:38:22      阅读:109      评论:0      收藏:0      [点我收藏+]

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

基于vue-cli搭建项目中权限

原文:https://www.cnblogs.com/jcxfighting/p/11994220.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!