devbox
代码维护者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3权限管理实现以及按钮权限实现_vue3 v-authority

作者：代码维护者 | 2024-02-04 14:00:28

赞

踩

vue3 v-authority
  1. /src/router/index.ts
  2. import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
  3.  
  4. export const Layout = () => import("@/layout/index.vue");
  5.  
  6. // 静态路由
  7. export const constantRoutes: RouteRecordRaw[] = [
  8.   {
  9.     path: "/redirect",
  10.     component: Layout,
  11.     meta: { hidden: true },
  12.     children: [
  13.       {
  14.         path: "/redirect/:path(.*)",
  15.         component: () => import("@/views/redirect/index.vue"),
  16.       },
  17.     ],
  18.   },
  19.  
  20.   {
  21.     path: "/login",
  22.     component: () => import("@/views/login/index.vue"),
  23.     meta: { hidden: true },
  24.   },
  25.  
  26.   {
  27.     path: "/",
  28.     component: Layout,
  29.     redirect: "/dashboard",
  30.     children: [
  31.       {
  32.         path: "dashboard",
  33.         component: () => import("@/views/dashboard/index.vue"),
  34.         name: "Dashboard",
  35.         meta: { title: "dashboard", icon: "homepage", affix: true },
  36.       },
  37.       {
  38.         path: "401",
  39.         component: () => import("@/views/error-page/401.vue"),
  40.         meta: { hidden: true },
  41.       },
  42.       {
  43.         path: "404",
  44.         component: () => import("@/views/error-page/404.vue"),
  45.         meta: { hidden: true },
  46.       },
  47.     ],
  48.   },
  49.  
  50.   // 外部链接
  51.   /*{
  52.         path: '/external-link',
  53.         component: Layout,
  54.         children: [
  55.             {
  56.                 path: 'https://www.cnblogs.com/haoxianrui/',
  57.                 meta: { title: '外部链接', icon: 'link' }
  58.             }
  59.         ]
  60.     }*/
  61.   // 多级嵌套路由
  62.   /* {
  63.          path: '/nested',
  64.          component: Layout,
  65.          redirect: '/nested/level1/level2',
  66.          name: 'Nested',
  67.          meta: {title: '多级菜单', icon: 'nested'},
  68.          children: [
  69.              {
  70.                  path: 'level1',
  71.                  component: () => import('@/views/nested/level1/index.vue'),
  72.                  name: 'Level1',
  73.                  meta: {title: '菜单一级'},
  74.                  redirect: '/nested/level1/level2',
  75.                  children: [
  76.                      {
  77.                          path: 'level2',
  78.                          component: () => import('@/views/nested/level1/level2/index.vue'),
  79.                          name: 'Level2',
  80.                          meta: {title: '菜单二级'},
  81.                          redirect: '/nested/level1/level2/level3',
  82.                          children: [
  83.                              {
  84.                                  path: 'level3-1',
  85.                                  component: () => import('@/views/nested/level1/level2/level3/index1.vue'),
  86.                                  name: 'Level3-1',
  87.                                  meta: {title: '菜单三级-1'}
  88.                              },
  89.                              {
  90.                                  path: 'level3-2',
  91.                                  component: () => import('@/views/nested/level1/level2/level3/index2.vue'),
  92.                                  name: 'Level3-2',
  93.                                  meta: {title: '菜单三级-2'}
  94.                              }
  95.                          ]
  96.                      }
  97.                  ]
  98.              },
  99.          ]
  100.      }*/
  101. ];
  102.  
  103. /**
  104.  * 创建路由
  105.  */
  106.  
  107. const router = createRouter({
  108.   history: createWebHashHistory(),
  109.   routes: constantRoutes as RouteRecordRaw[],
  110.   // 刷新时，滚动条位置还原
  111.   scrollBehavior: () => ({ left: 0, top: 0 }),
  112. });
  113.  
  114. /**
  115.  * 重置路由
  116.  */
  117. export function resetRouter() {
  118.   router.replace({ path: "/login" });
  119.   location.reload();
  120. }
  121.  
  122. export default router;
  1. /src/store/permission
  2.  
  3. import { RouteRecordRaw } from "vue-router";
  4. import { defineStore } from "pinia";
  5. import { constantRoutes } from "@/router";
  6. import { store } from "@/store";
  7. import { listRoutes } from "@/api/menu";
  8.  
  9. const modules = import.meta.glob("../../views/**/**.vue");
  10. const Layout = () => import("@/layout/index.vue");
  11.  
  12. /**
  13.  * Use meta.role to determine if the current user has permission
  14.  *
  15.  * @param roles 用户角色集合
  16.  * @param route 路由
  17.  * @returns
  18.  */
  19. const hasPermission = (roles: string[], route: RouteRecordRaw) => {
  20.   if (route.meta && route.meta.roles) {
  21.     // 角色【超级管理员】拥有所有权限，忽略校验
  22.     if (roles.includes("ROOT")) {
  23.       return true;
  24.     }
  25.     return roles.some((role) => {
  26.       if (route.meta?.roles !== undefined) {
  27.         return (route.meta.roles as string[]).includes(role);
  28.       }
  29.     });
  30.   }
  31.   return false;
  32. };
  33.  
  34. /**
  35.  * 递归过滤有权限的异步(动态)路由
  36.  *
  37.  * @param routes 接口返回的异步(动态)路由
  38.  * @param roles 用户角色集合
  39.  * @returns 返回用户有权限的异步(动态)路由
  40.  */
  41. const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
  42.   const asyncRoutes: RouteRecordRaw[] = [];
  43.   routes.forEach((route) => {
  44.     const tmpRoute = { ...route }; // ES6扩展运算符复制新对象
  45. 		// console.log(tmpRoute,route);
  46.     // 判断用户(角色)是否有该路由的访问权限
  47. 		// console.log(modules,tmpRoute.component);
  48.  
  49.     if (hasPermission(roles, tmpRoute)) {
  50.       if (tmpRoute.component?.toString() == "Layout") {
  51.         tmpRoute.component = Layout;
  52.       } else {
  53.         const component = modules[`../../views/${tmpRoute.component}.vue`];
  54. 				// console.log(modules['../../views/system/menu/index.vue'],'../../views/system/menu/index.vue');
  55.         if (component) {
  56.           tmpRoute.component = component;
  57.         } else {
  58.           tmpRoute.component = modules[`../../views/error-page/404.vue`];
  59.         }
  60.       }
  61. 			// debugger
  62.       if (tmpRoute.children) {
  63.         tmpRoute.children = filterAsyncRoutes(tmpRoute.children, roles);
  64.       }
  65. 			// console.log(asyncRoutes);
  66.       asyncRoutes.push(tmpRoute);
  67. 			// console.log(asyncRoutes)
  68.     }
  69.   });
  70.  
  71.   return asyncRoutes;
  72. };
  73.  
  74. // setup
  75. export const usePermissionStore = defineStore("permission", () => {
  76.   // state
  77.   const routes = ref<RouteRecordRaw[]>([]);
  78.  
  79.   // actions
  80.   function setRoutes(newRoutes: RouteRecordRaw[]) {
  81.     routes.value = constantRoutes.concat(newRoutes);
  82.   }
  83.   /**
  84.    * 生成动态路由
  85.    *
  86.    * @param roles 用户角色集合
  87.    * @returns
  88.    */
  89.   function generateRoutes(roles: string[]) {
  90.     return new Promise<RouteRecordRaw[]>((resolve, reject) => {
  91.       // 接口获取所有路由
  92.       listRoutes()
  93.         .then(({ data: asyncRoutes }) => {
  94. 					console.log(asyncRoutes,'asyncRoutes');
  95.           // 根据角色获取有访问权限的路由
  96.           const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
  97. 					console.log(accessedRoutes,'accessedRoutes');
  98.           setRoutes(accessedRoutes);
  99.           resolve(accessedRoutes);
  100.         })
  101.         .catch((error) => {
  102.           reject(error);
  103.         });
  104.     });
  105.   }
  106.   return { routes, setRoutes, generateRoutes };
  107. });
  108.  
  109. // 非setup
  110. export function usePermissionStoreHook() {
  111.   return usePermissionStore(store);
  112. }
  1. /src/permission
  2.  
  3. import router from "@/router";
  4. import { useUserStoreHook } from "@/store/modules/user";
  5. import { usePermissionStoreHook } from "@/store/modules/permission";
  6.  
  7. import NProgress from "nprogress";
  8. import "nprogress/nprogress.css";
  9. NProgress.configure({ showSpinner: false }); // 进度条
  10.  
  11. const permissionStore = usePermissionStoreHook();
  12.  
  13. // 白名单路由
  14. const whiteList = ["/login"];
  15.  
  16. router.beforeEach(async (to, from, next) => {
  17.   NProgress.start();
  18.   const hasToken = localStorage.getItem("accessToken");
  19.   if (hasToken) {
  20.     if (to.path === "/login") {
  21.       // 如果已登录，跳转首页
  22.       next({ path: "/" });
  23.       NProgress.done();
  24.     } else {
  25.       const userStore = useUserStoreHook();
  26.       const hasRoles = userStore.roles && userStore.roles.length > 0;
  27.       if (hasRoles) {
  28.         // 未匹配到任何路由，跳转404
  29.         if (to.matched.length === 0) {
  30.           from.name ? next({ name: from.name }) : next("/404");
  31.         } else {
  32.           next();
  33.         }
  34.       } else {
  35.         try {
  36. 					const { roles,perms } = await userStore.getInfo();
  37. 					console.log(roles,'roles');
  38.           const accessRoutes = await permissionStore.generateRoutes(roles);
  39.           accessRoutes.forEach((route) => {
  40.             router.addRoute(route);
  41.  
  42.           });
  43.           next({ ...to, replace: true });
  44.         } catch (error) {
  45.           // 移除 token 并跳转登录页
  46.           await userStore.resetToken();
  47.           next(`/login?redirect=${to.path}`);
  48.           NProgress.done();
  49.         }
  50.       }
  51.     }
  52.   } else {
  53.     // 未登录可以访问白名单页面
  54.     if (whiteList.indexOf(to.path) !== -1) {
  55.       next();
  56.     } else {
  57.       next(`/login?redirect=${to.path}`);
  58.       NProgress.done();
  59.     }
  60.   }
  61. });
  62.  
  63. router.afterEach(() => {
  64.   NProgress.done();
  65. });
  1. main.ts
  2.  
  3. import { createApp } from 'vue';
  4. import App from './App.vue';
  5. import router from '@/router';
  6. import { setupStore } from '@/store';
  7. import { setupDirective } from '@/directive';
  8.  
  9. //引入权限过滤功能
  10. import '@/permission';
  11.  
  12. // 本地SVG图标
  13. import 'virtual:svg-icons-register';
  14.  
  15. // 国际化
  16. import i18n from '@/lang/index';
  17.  
  18. // 样式
  19. import 'element-plus/theme-chalk/dark/css-vars.css';
  20. import '@/styles/index.scss';
  21. import 'uno.css';
  22.  
  23. const app = createApp(App);
  24. // 全局注册 自定义指令(directive)
  25. setupDirective(app);
  26. // 全局注册 状态管理(store)
  27. setupStore(app);
  28.  
  29. app.use(router).use(i18n).mount('#app');

以上是路由菜单管理的权限

  1. //指令权限 、src/directive/index
  2. import { useUserStoreHook } from '@/store/modules/user';
  3. import { Directive, DirectiveBinding } from 'vue';
  4.  
  5. /**
  6.  * 按钮权限
  7.  */
  8. export const hasPerm: Directive = {
  9.   mounted(el: HTMLElement, binding: DirectiveBinding) {
  10.     // 「超级管理员」拥有所有的按钮权限
  11.     const { roles, perms } = useUserStoreHook();
  12.     if (roles.includes('ROOT')) {
  13.       return true;
  14.     }
  15.     // 「其他角色」按钮权限校验
  16.     const { value } = binding;
  17.     if (value) {
  18.       const requiredPerms = value; // DOM绑定需要的按钮权限标识
  19.  
  20.       const hasPerm = perms?.some(perm => {
  21.         return requiredPerms.includes(perm);
  22.       });
  23.  
  24.       if (!hasPerm) {
  25.         el.parentNode && el.parentNode.removeChild(el);
  26.       }
  27.     } else {
  28.       throw new Error(
  29.         "need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\""
  30.       );
  31.     }
  32.   }
  33. };
  34.  
  35. /**
  36.  * 角色权限
  37.  */
  38. export const hasRole: Directive = {
  39.   mounted(el: HTMLElement, binding: DirectiveBinding) {
  40.     const { value } = binding;
  41.  
  42.     if (value) {
  43.       const requiredRoles = value; // DOM绑定需要的角色编码
  44.       const { roles } = useUserStoreHook();
  45.       const hasRole = roles.some(perm => {
  46.         return requiredRoles.includes(perm);
  47.       });
  48.  
  49.       if (!hasRole) {
  50.         el.parentNode && el.parentNode.removeChild(el);
  51.       }
  52.     } else {
  53.       throw new Error("need roles! Like v-has-role=\"['admin','test']\"");
  54.     }
  55.   }
  56. };

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/58906
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号