refactor: ♻️ 角色的路由权限判断移至后端

mock/menu.mock.ts

@@ -16,7 +16,6 @@ export default defineMock([
             title: "系统管理",
             icon: "system",
             hidden: false,
-            roles: ["ADMIN"],
             alwaysShow: false,
             params: null,
           },
@@ -29,7 +28,6 @@ export default defineMock([
                 title: "用户管理",
                 icon: "user",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: null,
@@ -43,7 +41,6 @@ export default defineMock([
                 title: "角色管理",
                 icon: "role",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: null,
@@ -57,7 +54,6 @@ export default defineMock([
                 title: "菜单管理",
                 icon: "menu",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: null,
@@ -71,7 +67,6 @@ export default defineMock([
                 title: "部门管理",
                 icon: "tree",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: null,
@@ -85,7 +80,6 @@ export default defineMock([
                 title: "字典管理",
                 icon: "dict",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: null,
@@ -101,7 +95,6 @@ export default defineMock([
             title: "接口文档",
             icon: "api",
             hidden: false,
-            roles: ["ADMIN"],
             alwaysShow: true,
             params: null,
           },
@@ -114,7 +107,6 @@ export default defineMock([
                 title: "Apifox",
                 icon: "api",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: null,
@@ -131,7 +123,6 @@ export default defineMock([
             title: "平台文档",
             icon: "document",
             hidden: false,
-            roles: ["ADMIN"],
             alwaysShow: false,
             params: null,
           },
@@ -144,7 +135,6 @@ export default defineMock([
                 title: "平台文档(内嵌)",
                 icon: "document",
                 hidden: false,
-                roles: ["ADMIN"],
                 alwaysShow: false,
                 params: null,
               },
@@ -156,7 +146,6 @@ export default defineMock([
                 title: "平台文档(外链)",
                 icon: "link",
                 hidden: false,
-                roles: ["ADMIN"],
                 alwaysShow: false,
                 params: null,
               },
@@ -171,7 +160,6 @@ export default defineMock([
             title: "多级菜单",
             icon: "cascader",
             hidden: false,
-            roles: ["ADMIN"],
             alwaysShow: true,
             params: null,
           },
@@ -184,7 +172,6 @@ export default defineMock([
                 title: "菜单一级",
                 icon: "",
                 hidden: false,
-                roles: ["ADMIN"],
                 alwaysShow: true,
                 params: null,
               },
@@ -197,7 +184,6 @@ export default defineMock([
                     title: "菜单二级",
                     icon: "",
                     hidden: false,
-                    roles: ["ADMIN"],
                     alwaysShow: false,
                     params: null,
                   },
@@ -210,7 +196,6 @@ export default defineMock([
                         title: "菜单三级-1",
                         icon: "",
                         hidden: false,
-                        roles: ["ADMIN"],
                         keepAlive: true,
                         alwaysShow: false,
                         params: null,
@@ -224,7 +209,6 @@ export default defineMock([
                         title: "菜单三级-2",
                         icon: "",
                         hidden: false,
-                        roles: ["ADMIN"],
                         keepAlive: true,
                         alwaysShow: false,
                         params: null,
@@ -244,7 +228,6 @@ export default defineMock([
             title: "组件封装",
             icon: "menu",
             hidden: false,
-            roles: ["ADMIN"],
             alwaysShow: false,
             params: null,
           },
@@ -257,7 +240,6 @@ export default defineMock([
                 title: "增删改查",
                 icon: "",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: null,
@@ -271,7 +253,6 @@ export default defineMock([
                 title: "列表选择器",
                 icon: "",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: null,
@@ -285,7 +266,6 @@ export default defineMock([
                 title: "富文本编辑器",
                 icon: "",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: null,
@@ -299,7 +279,6 @@ export default defineMock([
                 title: "图片上传",
                 icon: "",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: null,
@@ -313,7 +292,6 @@ export default defineMock([
                 title: "图标选择器",
                 icon: "",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: null,
@@ -327,7 +305,6 @@ export default defineMock([
                 title: "字典组件",
                 icon: "",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: null,
@@ -343,7 +320,6 @@ export default defineMock([
             title: "路由参数",
             icon: "el-icon-ElementPlus",
             hidden: false,
-            roles: ["ADMIN"],
             alwaysShow: true,
             params: null,
           },
@@ -356,7 +332,6 @@ export default defineMock([
                 title: "参数(type=1)",
                 icon: "el-icon-Star",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: {
@@ -372,7 +347,6 @@ export default defineMock([
                 title: "参数(type=2)",
                 icon: "el-icon-StarFilled",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: {
@@ -390,7 +364,6 @@ export default defineMock([
             title: "功能演示",
             icon: "menu",
             hidden: false,
-            roles: ["ADMIN"],
             alwaysShow: false,
             params: null,
           },
@@ -403,7 +376,6 @@ export default defineMock([
                 title: "Icons",
                 icon: "el-icon-Notification",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: null,
@@ -417,7 +389,6 @@ export default defineMock([
                 title: "Websocket",
                 icon: "",
                 hidden: false,
-                roles: ["ADMIN"],
                 keepAlive: true,
                 alwaysShow: false,
                 params: null,
@@ -431,7 +402,6 @@ export default defineMock([
                 title: "敬请期待...",
                 icon: "",
                 hidden: false,
-                roles: ["ADMIN"],
                 alwaysShow: false,
                 params: null,
               },

src/api/menu.ts

@@ -8,9 +8,12 @@ class MenuAPI {
    *
    * @returns 路由列表
    */
-  static getRoutes() {
+  static getRoutes(roles: string[]) {
+    const queryParams = roles
+      .map((role) => `roles=${encodeURIComponent(role)}`)
+      .join("&");
     return request<any, RouteVO[]>({
-      url: `${MENU_BASE_URL}/routes`,
+      url: `${MENU_BASE_URL}/routes?${queryParams}`,
       method: "get",
     });
   }
@@ -202,8 +205,6 @@ export interface Meta {
   icon?: string;
   /** 【菜单】是否开启页面缓存 */
   keepAlive?: boolean;
-  /** 拥有路由权限的角色编码 */
-  roles?: string[];
   /** 路由title */
   title?: string;
 }

src/store/modules/app.ts

@@ -99,8 +99,11 @@ export const useAppStore = defineStore("app", () => {
   };
 });
 
-// 手动提供给 useStore() 函数 pinia 实例
+/**
-// https://pinia.vuejs.org/zh/core-concepts/outside-component-usage.html#using-a-store-outside-of-a-component
+ * 用于在组件外部（如在Pinia Store 中）使用 Pinia 提供的 store 实例。
+ * 官方文档解释了如何在组件外部使用 Pinia Store：
+ * https://pinia.vuejs.org/core-concepts/outside-component-usage.html#using-a-store-outside-of-a-component
+ */
 export function useAppStoreHook() {
   return useAppStore(store);
 }

src/store/modules/permission.ts

@@ -6,88 +6,26 @@ import MenuAPI, { RouteVO } from "@/api/menu";
 const modules = import.meta.glob("../../views/**/**.vue");
 const Layout = () => import("@/layout/index.vue");
 
-/**
- * Use meta.role to determine if the current user has permission
- *
- * @param roles 用户角色集合
- * @param route 路由
- * @returns
- */
-const hasPermission = (roles: string[], route: RouteRecordRaw) => {
-  if (route.meta && route.meta.roles) {
-    // 角色【超级管理员】拥有所有权限，忽略校验
-    if (roles.includes("ROOT")) {
-      return true;
-    }
-    return roles.some((role) => {
-      if (route.meta?.roles) {
-        return route.meta.roles.includes(role);
-      }
-    });
-  }
-  return false;
-};
-
-/**
- * 递归过滤有权限的动态路由
- *
- * @param routes 接口返回所有的动态路由
- * @param roles 用户角色集合
- * @returns 返回用户有权限的动态路由
- */
-const filterAsyncRoutes = (routes: RouteVO[], roles: string[]) => {
-  const asyncRoutes: RouteRecordRaw[] = [];
-  routes.forEach((route) => {
-    const tmpRoute = { ...route } as RouteRecordRaw; // 深拷贝 route 对象 避免污染
-    if (hasPermission(roles, tmpRoute)) {
-      // 如果是顶级目录，替换为 Layout 组件
-      if (tmpRoute.component?.toString() == "Layout") {
-        tmpRoute.component = Layout;
-      } else {
-        // 如果是子目录，动态加载组件
-        const component = modules[`../../views/${tmpRoute.component}.vue`];
-        if (component) {
-          tmpRoute.component = component;
-        } else {
-          tmpRoute.component = modules[`../../views/error-page/404.vue`];
-        }
-      }
-
-      if (tmpRoute.children) {
-        tmpRoute.children = filterAsyncRoutes(route.children, roles);
-      }
-
-      asyncRoutes.push(tmpRoute);
-    }
-  });
-
-  return asyncRoutes;
-};
-// setup
 export const usePermissionStore = defineStore("permission", () => {
-  // state
+  /**
+   * 应用中所有的路由列表，包括静态路由和动态路由
+   */
   const routes = ref<RouteRecordRaw[]>([]);
-
+  /**
-  // actions
+   * 混合模式左侧菜单列表
-  function setRoutes(newRoutes: RouteRecordRaw[]) {
+   */
-    routes.value = constantRoutes.concat(newRoutes);
+  const mixLeftMenus = ref<RouteRecordRaw[]>([]);
-  }
 
   /**
    * 生成动态路由
-   *
-   * @param roles 用户角色集合
-   * @returns
    */
   function generateRoutes(roles: string[]) {
     return new Promise<RouteRecordRaw[]>((resolve, reject) => {
-      // 接口获取所有路由
+      MenuAPI.getRoutes(roles)
-      MenuAPI.getRoutes()
         .then((data) => {
-          // 过滤有权限的动态路由
+          const dynamicRoutes = transformRoutes(data);
-          const accessedRoutes = filterAsyncRoutes(data, roles);
+          routes.value = constantRoutes.concat(dynamicRoutes);
-          setRoutes(accessedRoutes);
+          resolve(dynamicRoutes);
-          resolve(accessedRoutes);
         })
         .catch((error) => {
           reject(error);
@@ -96,25 +34,60 @@ export const usePermissionStore = defineStore("permission", () => {
   }
 
   /**
-   * 获取与激活的顶部菜单项相关的混合模式左侧菜单集合
+   * 混合模式菜单下根据顶部菜单路径设置左侧菜单
+   *
+   * @param topMenuPath - 顶部菜单路径
    */
-  const mixLeftMenus = ref<RouteRecordRaw[]>([]);
+  const setMixLeftMenus = (topMenuPath: string) => {
-  function setMixLeftMenus(topMenuPath: string) {
     const matchedItem = routes.value.find((item) => item.path === topMenuPath);
     if (matchedItem && matchedItem.children) {
       mixLeftMenus.value = matchedItem.children;
     }
-  }
+  };
+
   return {
     routes,
-    setRoutes,
     generateRoutes,
     mixLeftMenus,
     setMixLeftMenus,
   };
 });
 
-// 非setup
+/**
+ * 转换路由数据为组件
+ */
+const transformRoutes = (routes: RouteVO[]) => {
+  const asyncRoutes: RouteRecordRaw[] = [];
+  routes.forEach((route) => {
+    const tmpRoute = { ...route } as RouteRecordRaw;
+    // 顶级目录，替换为 Layout 组件
+    if (tmpRoute.component?.toString() == "Layout") {
+      tmpRoute.component = Layout;
+    } else {
+      // 其他菜单，根据组件路径动态加载组件
+      const component = modules[`../../views/${tmpRoute.component}.vue`];
+      if (component) {
+        tmpRoute.component = component;
+      } else {
+        tmpRoute.component = modules[`../../views/error-page/404.vue`];
+      }
+    }
+
+    if (tmpRoute.children) {
+      tmpRoute.children = transformRoutes(route.children);
+    }
+
+    asyncRoutes.push(tmpRoute);
+  });
+
+  return asyncRoutes;
+};
+
+/**
+ * 用于在组件外部（如在Pinia Store 中）使用 Pinia 提供的 store 实例。
+ * 官方文档解释了如何在组件外部使用 Pinia Store：
+ * https://pinia.vuejs.org/core-concepts/outside-component-usage.html#using-a-store-outside-of-a-component
+ */
 export function usePermissionStoreHook() {
   return usePermissionStore(store);
 }

src/types/router.d.ts

@@ -50,11 +50,5 @@ declare module "vue-router" {
      * @default false
      */
     breadcrumb?: boolean;
-
-    /**
-     * 拥有访问该菜单权限的角色编码集合
-     * @example ['admin', 'editor']
-     */
-    roles?: string[];
   }
 }