（vue权限管理）前端路由表脚色权限管理，通过登录不同脚色侧边栏体现对应

前端路由表脚色权限管理，通过登录不同脚色侧边栏体现对应页面

demo根据vue-admin-template为基础修改，起首展示实现的效果


1. 起首在src/router/index.js中添加路由表，其中constantRoutes 设置的为全部脚色可见的路由，asyncRouterMap为对应权限人员可见路由，demo路由表代码如下:

1. import Vue from 'vue'
2. import Router from 'vue-router'
4. Vue.use(Router)
6. //避免导航守卫报错
7. const originalPush = Router.prototype.push
8. Router.prototype.push = function push(location, onResolve, onReject) {
9.   if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
10.   return originalPush.call(this, location).catch(err => err)
11. }
12. /* Layout */
13. import Layout from '@/layout'
15. //所有人可见
16. export const constantRoutes = [
17.   {
18.     path: '/login',
19.     component: () => import('@/views/login/index'),
20.     hidden: true
21.   },
23.   {
24.     path: '/404',
25.     component: () => import('@/views/404'),
26.     hidden: true
27.   },
29.   {
30.     path: '/',
31.     component: Layout,
32.     redirect: '/dashboard',
33.     children: [
34.       {
35.         path: 'dashboard',
36.         name: 'Dashboard',
37.         component: () => import('@/views/dashboard/index'),
38.         meta: {
39.           title: '首页',
40.           icon: 'dashboard'
41.         }
42.       }
43.     ]
44.   },
46.   {
47.     path: '/example',
48.     component: Layout,
49.     children: [
50.       {
51.         path: 'index',
52.         name: 'Table',
53.         component: () => import('@/views/table/index'),
54.         meta: {
55.           title: '所有人可见',
56.           icon: 'table'
57.         }
58.       }
59.     ]
60.   },
61.   // 404 page must be placed at the end !!!
62.   { path: '*', redirect: '/404', hidden: true }
63. ]
65. //相应权限人员可见
66. export const asyncRouterMap = [
67.   {
68.     path: '/form',
69.     component: Layout,
70.     children: [
71.       {
72.         path: 'index',
73.         name: 'Form',
74.         component: () => import('@/views/form/index'),
75.         meta: {
76.           title: '所有人可见',
77.           icon: 'form',
78.           role: ['admin']
79.         }
80.       }
81.     ]
82.   },
83.   {
84.     path: '/system',
85.     component: Layout,
86.     redirect: 'system/test',
87.     name: 'System',
88.     alwaysShow: true,
89.     meta:{title:'系统管理', icon: 'nested', role: ['admin','editor']},
90.     children: [
91.       {
92.         path: '权限管理',
93.         name: 'test',
94.         name: 'Test',
95.         component: () => import('@/views/system/index'),
96.         meta: {
97.           title: '权限修改',
98.           icon: 'table',
99.           role: ['admin']
100.         }
101.       }
102.     ]
103.   }
104. ]
106. const createRouter = () =>
107.   new Router({
108.     // mode: 'history', // require service support
109.     scrollBehavior: () => ({ y: 0 }),
110.     routes: constantRoutes
111.   })
113. const router = createRouter()
115. // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
116. export function resetRouter() {
117.   const newRouter = createRouter()
118.   router.matcher = newRouter.matcher // reset router
119. }
121. export default router

复制代码

2.在src/api/user.js中创建用户登录，获取用户信息，以及登出的接口


3.在store/modules/user.js文件，添加获取脚色权限role的信息



4.在src/store/modules/目次下创建permission.js，来存储不同权限动态添加的路由表，文件代码如下：

1. import { asyncRouterMap, constantRoutes } from '@/router'
3. /**
4. * Use meta.role to determine if the current user has permission
5. * @param role
6. * @param route
7. */
8. function hasPermission(role, route) {
9.     if (route.meta && route.meta.role) {
10.         // return roleArr.some(role => route.meta.role.includes(role))  //当给的角色权限为数组形式可采取该方式判断返回值
11.         return route.meta.role.includes(role)?true:false  //当角色权限为字符串时，采用该方式判断
12.     } else {
13.         return true
14.     }
15. }
17. /**
18. * 将符合相应权限的路由表筛选出来
19. * @param routes asyncRouterMap
20. * @param role
21. */
22. export function filterasyncRouterMap(routes, role) {
23.     const res = []
24.     routes.forEach(route => {
25.         const tmp = { ...route }
26.         if (hasPermission(role, tmp)) {
27.             console.log(111);
28.             if (tmp.children) {
29.                 tmp.children = filterasyncRouterMap(tmp.children, role)
30.             }
31.             res.push(tmp)
32.         }
33.     })
35.     return res
36. }
38. const permission = {
39.     state: {
40.         routes: [],
41.         addRoutes: []
42.     },
43.     mutations: {
44.         SET_ROUTES: (state, routes) => {
45.             state.addRoutes = routes
46.             state.routes = constantRoutes.concat(routes)
47.         }
48.     },
49.     actions: {
50.         generateRoutes({ commit }, role) {
51.             return new Promise(resolve => {
52.                 let accessedRoutes
53.                 //如果角色是admin
54.                 if (role.includes('admin')) {
55.                 //将route.js中的admin权限人员可见的路由表加入，此处我们只有admin和editor两个角色
56.                     accessedRoutes = asyncRouterMap || []
57.                 } else {
58.                     accessedRoutes = filterasyncRouterMap(asyncRouterMap, role) || []
59.                 }
60.                 commit('SET_ROUTES', accessedRoutes)
61.                 resolve(accessedRoutes)
62.             })
63.         }
64.     }
66. }
68. export default permission

复制代码

5.在src/store/getters.js中，代码如下（注意：state.permission.routes别写成了state.user.routes）：


6.在src/store/index.js中，代码如下


7.最后在src/permission.js的路由导航守卫中添加动态路由，此处用到了vue-router的addRoute函数，修改处代码如下：


8.在src/layout/components/Sidebar/index中，添加新的路由表，代码如下：


终极可以实现文章首部动图效果，简单的纪录下前端路由表权限管理功能实现，若有禁绝确处，批评处可交换讨论，文末会贴源码，安装依赖后可直接运行。
文末demo码云链接：权限管理demo

来源：https://blog.csdn.net/qq_36660135/article/details/129064461
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！