refactor: ♻️ 获取路由接口移除角色参数，后端从token解析角色

src/api/menu.ts

@@ -4,16 +4,15 @@ const MENU_BASE_URL = "/api/v1/menus";
 
 class MenuAPI {
   /**
-   * 获取路由列表
+   * 获取当前用户的路由列表
+   * <p/>
+   * 无需传入角色，后端解析token获取角色自行判断是否拥有路由的权限
    *
    * @returns 路由列表
    */
-  static getRoutes(roles: string[]) {
+  static getRoutes() {
-    const queryParams = roles
-      .map((role) => `roles=${encodeURIComponent(role)}`)
-      .join("&");
     return request<any, RouteVO[]>({
-      url: `${MENU_BASE_URL}/routes?${queryParams}`,
+      url: `${MENU_BASE_URL}/routes`,
       method: "get",
     });
   }

src/plugins/permission.ts

@@ -1,8 +1,13 @@
-import router from "@/router";
+import {
-import { useUserStore, usePermissionStore } from "@/store";
+  NavigationGuardNext,
+  RouteLocationNormalized,
+  RouteRecordRaw,
+} from "vue-router";
+
 import NProgress from "@/utils/nprogress";
-import { RouteRecordRaw } from "vue-router";
 import { TOKEN_KEY } from "@/enums/CacheEnum";
+import router from "@/router";
+import { usePermissionStore, useUserStore } from "@/store";
 
 export function setupPermission() {
   // 白名单路由
@@ -11,19 +16,21 @@ export function setupPermission() {
   router.beforeEach(async (to, from, next) => {
     NProgress.start();
     const hasToken = localStorage.getItem(TOKEN_KEY);
+
     if (hasToken) {
       if (to.path === "/login") {
-        // 如果已登录，跳转首页
+        // 如果已登录，跳转到首页
         next({ path: "/" });
         NProgress.done();
       } else {
         const userStore = useUserStore();
         const hasRoles =
           userStore.user.roles && userStore.user.roles.length > 0;
+
         if (hasRoles) {
-          // 未匹配到任何路由，跳转404
+          // 如果未匹配到任何路由，跳转到404页面
           if (to.matched.length === 0) {
-            from.name ? next({ name: from.name }) : next("/404");
+            next(from.name ? { name: from.name } : "/404");
           } else {
             // 如果路由参数中有 title，覆盖路由元信息中的 title
             const title =
@@ -31,45 +38,32 @@ export function setupPermission() {
             if (title) {
               to.meta.title = title;
             }
-
             next();
           }
         } else {
           const permissionStore = usePermissionStore();
           try {
-            const { roles } = await userStore.getUserInfo();
+            await userStore.getUserInfo();
-            const accessRoutes = await permissionStore.generateRoutes(roles);
+            const dynamicRoutes = await permissionStore.generateRoutes();
-            accessRoutes.forEach((route: RouteRecordRaw) => {
+            dynamicRoutes.forEach((route: RouteRecordRaw) =>
-              router.addRoute(route);
+              router.addRoute(route)
-            });
+            );
             next({ ...to, replace: true });
           } catch (error) {
-            // 移除 token 并跳转登录页
+            // 移除 token 并重定向到登录页，携带当前页面路由作为跳转参数
             await userStore.resetToken();
-            // 重定向到登录页，并携带当前页面路由和参数，作为登录成功后跳转的页面
+            redirectToLogin(to, next);
-            const params = new URLSearchParams(
-              to.query as Record<string, string>
-            );
-            const queryString = params.toString();
-            const redirect = queryString
-              ? `${to.path}?${queryString}`
-              : to.path;
-            next(`/login?redirect=${encodeURIComponent(redirect)}`);
             NProgress.done();
           }
         }
       }
     } else {
       // 未登录
-      if (whiteList.indexOf(to.path) !== -1) {
+      if (whiteList.includes(to.path)) {
-        // 在白名单，直接进入
+        next(); // 在白名单，直接进入
-        next();
       } else {
         // 不在白名单，重定向到登录页
-        const params = new URLSearchParams(to.query as Record<string, string>);
+        redirectToLogin(to, next);
-        const queryString = params.toString();
-        const redirect = queryString ? `${to.path}?${queryString}` : to.path;
-        next(`/login?redirect=${encodeURIComponent(redirect)}`);
         NProgress.done();
       }
     }
@@ -80,20 +74,31 @@ export function setupPermission() {
   });
 }
 
-// 是否有权限
+/** 重定向到登录页 */
+function redirectToLogin(
+  to: RouteLocationNormalized,
+  next: NavigationGuardNext
+) {
+  const params = new URLSearchParams(to.query as Record<string, string>);
+  const queryString = params.toString();
+  const redirect = queryString ? `${to.path}?${queryString}` : to.path;
+  next(`/login?redirect=${encodeURIComponent(redirect)}`);
+}
+
+/** 判断是否有权限 */
 export function hasAuth(
   value: string | string[],
   type: "button" | "role" = "button"
 ) {
   const { roles, perms } = useUserStore().user;
-  //「超级管理员」拥有所有的按钮权限
+
+  // 超级管理员 拥有所有权限
   if (type === "button" && roles.includes("ROOT")) {
     return true;
   }
+
   const auths = type === "button" ? perms : roles;
   return typeof value === "string"
     ? auths.includes(value)
-    : auths.some((perm) => {
+    : value.some((perm) => auths.includes(perm));
-        return value.includes(perm);
-      });
 }

src/store/modules/permission.ts

@@ -19,9 +19,9 @@ export const usePermissionStore = defineStore("permission", () => {
   /**
    * 生成动态路由
    */
-  function generateRoutes(roles: string[]) {
+  function generateRoutes() {
     return new Promise<RouteRecordRaw[]>((resolve, reject) => {
-      MenuAPI.getRoutes(roles)
+      MenuAPI.getRoutes()
         .then((data) => {
           const dynamicRoutes = transformRoutes(data);
           routes.value = constantRoutes.concat(dynamicRoutes);