vue2模拟vue-element-admin手写角色权限的实现

目录

权限

路由权限

store存储路由router添加路由

菜单权限按钮权限

准备：存储按钮标识指令函数

权限


路由权限

静态路由：固定的路由，没有权限。如login页面动态路由：根据不同的角色，后端返回不同的路由接口。通过meta中的roles去做筛选

store存储路由

1. //地址：store/modules/permission
2. import { routes as constantRoutes } from '@/router'
4. // 根据meta.roles去判断该角色是否有路由权限
5. function hasPermission(oles, route) {
6.   if (route.meta && route.meta.roles) {
7.     return route.meta.roles.some(val => val === roles)
8.   }
9.   return true
10. }
12. /**
13. * 递归动态路由
14. * @param routes 动态路由
15. * @param roles 角色
16. */
17. export function filterAsyncRoutes(routes, roles) {
18.   const res = []
19.   routes.forEach(route => {
20.     const tmp = { ...route }
21.     if (hasPermission(roles, tmp)) {
22.       if (tmp.children) {
23.         //后台传来的路由字符串，转换为组件对象
24.         //       let a = `../views/${route.component}`;
25.         //       route.component = () => import(a); // 导入组件
26.         tmp.children = filterAsyncRoutes(tmp.children, roles)
27.       }
28.       res.push(tmp)
29.     }
30.   })
32.   return res
33. }
35. //模拟后端传过来的路由
36. export const asyncRoutes = [
37.   {
38.     path: '/',
39.     name: 'home',
40.     redirect: '/PickupTask',
41.     meta: {
42.       title: '首页',
43.       //纯前端去做动态路由
44.       roles: ['admin']
45.     },
46.     component: () => import('@/views/HomeView.vue'),
47.     children: [
48.       {
49.         path: 'PickupTask',
50.         name: 'PickupTask',
51.         meta: {
52.           title: 'PickupTask',
53.         },
54.         component: () => import('@/views/Sd/PickupTask.vue'),
55.       },
56.       {
57.         path: 'access',
58.         hidden: true,
59.         component: () => import('@/views/demo/Access.vue'),
60.         meta: {
61.           title: 'access',
62.           roles: ['admin'],
63.           //按钮权限标识
64.           button: {
65.             'btn:access:createUser': 'hidden',
66.             'btn:access:editUser': 'disable'
67.           },
68.         },
69.       },
70.     ],
71.   }
72. ]
74. const permisssion = {
75.   // namespaced: true, -> store.dispatch('permisssion/generateRoutes', 'admin');
76.   state: {
77.     //静态路由+动态路由
78.     routes: [],
79.     //动态路由
80.     addRoutes: []
81.   },
82.   mutations: {
83.     SET_ROUTES: (state, routes) => {
84.       state.addRoutes = routes
85.       state.routes = constantRoutes.concat(routes)
86.     }
87.   },
88.   actions: {
89.     generateRoutes({ commit }, roles) {
90.       return new Promise(resolve => {
91.         let accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
92.         commit('SET_ROUTES', accessedRoutes)
93.         resolve(accessedRoutes)
94.       })
95.     }
96.   }
97. }
99. export default permisssion

复制代码

router添加路由

将store中的动态路由使用addRoute添加(最新版本去掉了addRoutes只能使用addRoute添加路由)。

1. //地址：router/index
2. import Vue from 'vue';
3. import VueRouter, { RouteConfig } from 'vue-router';
4. import store from '@/store';
6. Vue.use(VueRouter);
8. const isProd = process.env.NODE_ENV === 'production';
9. const routerContext = require.context('./', true, /index.js$/);
10. //静态路由
11. export let routes: any = [];
13. routerContext.keys().forEach((route) => {
14.   // route就是路径
15.   // 如果是根目录的index不做处理
16.   if (route.startsWith('./index')) {
17.     return;
18.   }
19.   const routerModule = routerContext(route);
20.   routes = [...routes, ...(routerModule.default || routerModule)];
21. });
23. // 创建 router 实例，然后传 `routes` 配置
24. const router = new VueRouter({
25.   mode: 'history',
26.   base: isProd ? '/vue-demo/' : process.env.BASE_URL,
27.   routes,
28.   scrollBehavior(to, from, savedPosition) {
29.     if (to.hash) {
30.       return {
31.         selector: to.hash,
32.       };
33.     }
34.   },
35. });
37. let registerRouteFresh = true;
38. /**
39. * 全局全局前置守卫
40. * to : 将要进入的目标路由对象
41. * from : 即将离开的目标路由对象
42. */
43. router.beforeEach(async (to: any, from, next) => {
44.   //设置当前页的title
45.   document.title = to.meta.title;
46.   if (to.path === '/login' && localStorage.getItem('token')) {
47.     next('/');
48.   }
49.   console.log(registerRouteFresh);
50.   //如果首次或者刷新界面，next(...to, replace: true)会循环遍历路由，
51.   //如果to找不到对应的路由那么他会再执行一次beforeEach((to, from, next))直到找到对应的路由，
52.   //我们的问题在于页面刷新以后异步获取数据，直接执行next()感觉路由添加了但是在next()之后执行的，
53.   //所以我们没法导航到相应的界面。这里使用变量registerRouteFresh变量做记录，直到找到相应的路由以后，把值设置为false然后走else执行next(),整个流程就走完了，路由也就添加完了。
54.   if (registerRouteFresh) {
55.     //设置路由
56.     const accessRoutes = await store.dispatch('generateRoutes', 'admin');
57.     let errorPage = {
58.       path: '*',
59.       name: '404',
60.       component: () => import('../views/404.vue'),
61.     };
62.     // 将404添加进去
63.     // 现在才添加的原因是：作为一级路由，当刷新，动态路由还未加载，路由就已经做了匹配，找不到就跳到了404
64.     router.addRoute({ ...errorPage });
65.     accessRoutes.forEach((item: RouteConfig) => {
66.       router.addRoute(item);
67.     });
68.     //获取路由配置
69.     console.log(router.getRoutes());
70.     //通过next({...to, replace})解决刷新后路由失效的问题
71.     next({ ...to, replace: true });
72.     registerRouteFresh = false;
73.   } else {
74.     next();
75.   }
76.   next();
77. });
79. export default router;

复制代码

菜单权限

路由遍历，通过store路由权限中的permission.state.routes去做处理

按钮权限


准备：存储按钮标识

1. //地址：store/modules/user
2. import {
3.   userInfo,
4. } from '@/api'
6. const user = {
7.   state: {
8.     role: 'admin',
9.     mockButton: {
10.       'btn:access:createUser': 'show',
11.       'btn:access:editUser': 'show'
12.     }
13.   },
14.   //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
15.   mutations: {
16.     change_role: (state, data) => {
17.       state.role = data.role
18.     },
19.     change_btn: (state, data) => {
20.       state.mockButton = data.mockButton
21.     }
22.   },
23. }
25. export default user

复制代码

指令

通过模拟传入按钮标识的属性，去判断按钮是否隐藏或者禁用

1. //地址：directive/permission/index
2. import permission from './permissionBtn'
4. const install = function(Vue) {
5.   Vue.directive('permission', permission)
6. }
8. if (window.Vue) {
9.   window['permission'] = permission
10.   Vue.use(install); // eslint-disable-line
11. }
13. permission.install = install
14. export default permission

复制代码

1. //地址：directive/permission/permissionBtn
2. import store from '@/store'
4. function checkPermission(el, binding) {
5.   const { value } = binding
6.   const roles = store.getters && store.getters.role
7.   // 获取模拟权限按钮标识
8.   const mockButton = store.getters && store.getters.mockButton
9.   // 设置按钮属性
10.   if (mockButton[value] === 'disabled') {
11.     el.disabled = true
12.     el.setAttribute('disabled', true)
13.   }
15.   if (mockButton[value] === 'hidden') {
16.     el.style.display = 'none'
17.   }
18.   if (mockButton[value] === 'show') {
19.     el.style.display = 'block'
20.     el.disabled = false
21.   }
22.   // throw new Error(`need roles! Like v-permission="['admin','editor']"`)
23. }
25. export default {
26.   inserted(el, binding) {
27.     checkPermission(el, binding)
28.   },
29.   update(el, binding) {
30.     checkPermission(el, binding)
31.   }
32. }

复制代码

//应用

1. <template>
2.   <div>
3.     <a-button @click="changeRole">切换角色</a-button>
4.     <span>当前角色：{{ role }}</span>
5.     <!-- 注意一定要加disabled属性，才能设置它的disabled值 -->
6.     <a-button :disabled="false" v-permission="'btn:access:createUser'">
7.       新建用户
8.     </a-button>
9.     <a-button :disabled="false" v-permission="'btn:access:editUser'">
10.       编辑用户
11.     </a-button>
12.   </div>
13. </template>
15. <script lang='ts'>
16. import { Vue, Component, Watch } from "vue-property-decorator";
17. import permission from "@/directive/permission/index.js"; // 权限判断指令
18. // import checkPermission from '@/utils/permission' // 权限判断函数
19. @Component({
20.   directives: {
21.     permission,
22.   },
23.   computed: {
24.     role() {
25.       return this.$store.getters.role;
26.     },
27.   },
28. })
29. export default class Access extends Vue {
30.   get role() {
31.     return this.$store.getters.role;
32.   }
34.   changeRole() {
35.     //设置按钮权限
36.     this.$store.commit("change_btn", {
37.       mockButton:
38.         this.role === "admin"
39.           ? {
40.               "btn:access:createUser": "hidden",
41.               "btn:access:editUser": "disabled",
42.             }
43.           : {
44.               "btn:access:createUser": "show",
45.               "btn:access:editUser": "show",
46.             },
47.     });
48.     //设置角色
49.     this.$store.commt("change_role", {
50.       role: this.role === "admin" ? "edit" : "admin",
51.     });
52.   }
53. }
54. </script>

复制代码

函数

1. /**
2. * @param {Array} value
3. * @returns {Boolean}
4. * @example see @/views/permission/directive.vue
5. * 除了使用指令，也可以使用函数
6. */
7. export default function checkPermission(value) {
8.   if (value && value instanceof Array && value.length > 0) {
9.     const roles = store.getters && store.getters.roles
10.     const permissionRoles = value
12.     const hasPermission = roles.some(role => {
13.       return permissionRoles.includes(role)
14.     })
15.     return hasPermission
16.   }
17.     console.error(`need roles! Like v-permission="['admin','editor']"`)
18.     return false
20. }

复制代码

1. <template>
2.   <div>
3.     <a-button
4.       v-if="hasPerms('btn:access:createUser')"
5.       :disable="hasPerms('btn:access:createUser')"
6.     >
7.       新建用户
8.     </a-button>
9.     <a-button
10.       v-if="hasPerms('btn:access:editUser')"
11.       :disable="hasPerms('btn:access:editUser')"
12.     >
13.       编辑用户
14.     </a-button>
15.   </div>
16. </template>
18. <script lang='ts'>
19. import { Vue, Component, Watch } from "vue-property-decorator";
20. import checkPermission from "@/utils/permission"; // 权限判断函数
21. @Component
22. export default class Access extends Vue {
23.   hasPerms(params) {
24.     return checkPermission(params);
25.   }
26. }
27. </script>

复制代码

到此这篇关于vue2模拟vue-element-admin手写角色权限的实现的文章就介绍到这了,更多相关vue2 角色权限内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！