Vue-3路由级权限控制

首先先给大家说一下思路

1. 首先提前编写过滤器的函数
2. 将固定的路由和业务路由分开管理，将固定路由设置默认所有用户都可以访问的路由，给业务路由添加用户访问权限
3. 在登录成功的时候保存token及userinfo之后，调用过滤路由之前的函数，过滤用户有权限访问的业务路由
4. 将过滤的出来的路由，用forEach遍历，并且使用addRoute动态添加router中
5. 正常访问路由

 编写过滤器的文件  -----比如authorization.js

1.  
   function hasAuth( permission, permissions ){
2.  
   //判断是否有访问该路由的权限 , 结果是 true/false
3.  
   return permissions.includes(permission);
4.  
   }
5.  
    
6.  
    
7.  
   /*
8.  
   功能: 拿到一个路由, 用户的权限列表, 判断这个路由是否在用户的权限列表中, 返回ture/false
9.  
   返回值: true 表示用户有访问该路由的权限, false表示用户没有访问该路由的权限
10.  
    参数一: route 路由 , 例如: {path: '',meta:{permission:2},component: Register}
11.  
    参数二: permissions 用户的权限列表 , 例如: [1, 11, 2]
12.  
    */
13.  
    function hasPermission( route, permissions ){
14.  
    //需要权限才能访问
15.  
    if( route.meta && route.meta.permission ){
16.  
    //判断是否有访问该路由的权限 , 结果是 true/false
17.  
    return permissions.includes(route.meta.permission);
18.  
    //不需要权限就可以访问
19.  
    }else{
20.  
    return true;
21.  
    }
22.  
    }
23.  
     
24.  
    /*
25.  
    功能: 拿到业务路由表,用户的权限列表, 根据用户的权限列表从业务路由表中过滤出用户有权限访问的路由.
26.  
    参数一: routes 业务路由表 , 例如: [{path: '',meta:{permission:2},component: Register},...]
27.  
    参数二: permissions 用户的权限列表 , 例如: [1, 11, 2]
28.  
    */
29.  
    export function filterRoutes( routes, permissions ){
30.  
    var accessRoutes = [];
31.  
    //过滤routes这个路由表
32.  
    accessRoutes = routes.filter((route)=>{
33.  
    //判断: 如果route表示的路由规则在用户的权限列表中,则用户有权限访问该路由,该路由就需要过滤出来.
34.  
    if( hasPermission( route, permissions ) ){
35.  
    //如果route 这个路由有子路由表, 则继续过滤子路由表
36.  
    if( route.children && route.children.length ){
37.  
    //继续过滤子路由表( 调用 filterRoutes 自身 过滤子路由表 )
38.  
    route.children = filterRoutes( route.children, permissions )
39.  
    }
40.  
    return true;
41.  
    }else{
42.  
    return false;
43.  
    }
44.  
    })
45.  
     
46.  
    //返回最终过滤出来的 用户有权限访问的路由.
47.  
    return accessRoutes;
48.  
    }

将业务路由分割出来，单独管理------routes.js

1.  
   //业务路由( 必须经过权限过滤才可以决定 用户能访问哪些路由 )
2.  
   //添加一个判断的变量 通过后端返回的数据与你自己设定的参数变量对比看是否存在 我在这里设置的是permission
3.  
   export default [
4.  
   {
5.  
   path: '/index',
6.  
   name: 'index',
7.  
   meta: {title:'考勤管理'},
8.  
   component: () => import('../views/Index.vue'),
9.  
   children:[
10.  
    {
11.  
    path: '/index/business',
12.  
    name: 'business',
13.  
    meta: {title:'出差申请', permission: 11 },
14.  
    component: () => import('../views/Index/Business.vue'),
15.  
    },
16.  
    {
17.  
    path: '/index/outside',
18.  
    name: 'outside',
19.  
    meta: {title:'外勤打卡', permission: 12 },
20.  
    component: () => import('../views/Index/Outside.vue'),
21.  
    },
22.  
    {
23.  
    path: '/index/leave',
24.  
    name: 'leave',
25.  
    meta: {title:'请假申请', permission: 13 },
26.  
    component: () => import('../views/Index/Leave.vue'),
27.  
    },
28.  
    {
29.  
    path: '/index/work',
30.  
    name: 'work',
31.  
    meta: {title:'加班申请', permission: 14 },
32.  
    component: () => import('../views/Index/Work.vue'),
33.  
    },
34.  
    {
35.  
    path: '/index',
36.  
    redirect:'/index/business'
37.  
    },
38.  
    {
39.  
    path: '/index/:error(.*)',
40.  
    component: () => import('../views/NotFound.vue')
41.  
    },
42.  
    ]
43.  
    },
44.  
    {
45.  
    path: '/register',
46.  
    name: 'register',
47.  
    meta: {title:'考勤管理-注册', permission: 2 },
48.  
    component: () => import('../views/Register.vue')
49.  
    }
50.  
    ]

在登录页面login.vue里面设置路由权限-----记得引入文件  

1.  
   import routes from '../router/routes' //来源于业务列表
2.  
   //保存token,userinfo
3.  
   localStorage.setItem('token',res.data.token);
4.  
   localStorage.setItem('userinfo',JSON.stringify( res.data.userinfo ));
5.  
    
6.  
   //!!!!!!!!!!!!!!!!!!!!! 以下两步必须写在登陆成功并且保存token及userinfo之后,跳转首页之前 !!!!!!!!!!!!!!!!!!!!!
7.  
   //过滤出当前用户有权限访问的业务路由
8.  
   var accessRoutes = filterRoutes( routes , res.data.userinfo.role.permissions )
9.  
   console.log(accessRoutes);
10.  
     
11.  
    //将过滤出来的路由 动态添加到router中
12.  
    accessRoutes.forEach((route)=>{
13.  
    $router.addRoute(route); //循环一次, 添加一条路由
14.  
    })
15.  
     
16.  
    //$router.addRoutes(accessRoutes); //Vue2中可以一次性添加所有路由.
17.  
     
18.  
    // 跳转首页
19.  
    $router.push('/');

解决刷新页面路由被路由权限规则顶掉的问题-----在main.js中设置以下代码即可（注意顺序必须在router实例之前，否则代码不生效）

1.  
   var permissions = JSON.parse( localStorage.getItem('userinfo') ).role.permissions;
2.  
   //动态过滤用户又权限访问的路由
3.  
   var accessRoutes = filterRoutes( routes , permissions )
4.  
   console.log(accessRoutes);
5.  
    
6.  
   //将过滤出来的路由 动态添加到router中
7.  
   accessRoutes.forEach((route)=>{
8.  
   router.addRoute(route); //循环一次, 添加一条路由
9.  
   })
10.  
     
11.  
    app.use(router)

这篇好文章是转载于：学新通技术网