refactor(auth): ♻️ 重构认证逻辑，分离登录跳转与token刷新

src/composables/auth/useTokenRefresh.ts

@@ -0,0 +1,87 @@
+import type { InternalAxiosRequestConfig } from "axios";
+import { useUserStoreHook } from "@/store/modules/user-store";
+import { AuthStorage, redirectToLogin } from "@/utils/auth";
+
+/**
+ * 重试请求的回调函数类型
+ */
+type RetryCallback = () => void;
+
+/**
+ * Token刷新组合式函数
+ */
+export function useTokenRefresh() {
+  // Token 刷新相关状态
+  let isRefreshingToken = false;
+  const pendingRequests: RetryCallback[] = [];
+
+  /**
+   * 刷新 Token 并重试请求
+   */
+  async function refreshTokenAndRetry(
+    config: InternalAxiosRequestConfig,
+    httpRequest: any
+  ): Promise<any> {
+    return new Promise((resolve, reject) => {
+      // 封装需要重试的请求
+      const retryRequest = () => {
+        const newToken = AuthStorage.getAccessToken();
+        if (newToken && config.headers) {
+          config.headers.Authorization = `Bearer ${newToken}`;
+        }
+        httpRequest(config).then(resolve).catch(reject);
+      };
+
+      // 将请求加入等待队列
+      pendingRequests.push(retryRequest);
+
+      // 如果没有正在刷新，则开始刷新流程
+      if (!isRefreshingToken) {
+        isRefreshingToken = true;
+
+        useUserStoreHook()
+          .refreshToken()
+          .then(() => {
+            // 刷新成功，重试所有等待的请求
+            pendingRequests.forEach((callback) => {
+              try {
+                callback();
+              } catch (error) {
+                console.error("Retry request error:", error);
+              }
+            });
+            // 清空队列
+            pendingRequests.length = 0;
+          })
+          .catch(async (error) => {
+            console.error("Token refresh failed:", error);
+            // 刷新失败，清空队列并跳转登录页
+            pendingRequests.length = 0;
+            await redirectToLogin("登录状态已失效，请重新登录");
+            // 拒绝所有等待的请求
+            pendingRequests.forEach(() => {
+              reject(new Error("Token refresh failed"));
+            });
+          })
+          .finally(() => {
+            isRefreshingToken = false;
+          });
+      }
+    });
+  }
+
+  /**
+   * 获取刷新状态（用于外部判断）
+   */
+  function getRefreshStatus() {
+    return {
+      isRefreshing: isRefreshingToken,
+      pendingCount: pendingRequests.length,
+    };
+  }
+
+  return {
+    refreshTokenAndRetry,
+    getRefreshStatus,
+  };
+}

src/composables/index.ts

@@ -2,6 +2,7 @@ export { useStomp } from "./websocket/useStomp";
 export { useDictSync } from "./websocket/useDictSync";
 export type { DictMessage } from "./websocket/useDictSync";
 export { useOnlineCount } from "./websocket/useOnlineCount";
+export { useTokenRefresh } from "./auth/useTokenRefresh";
 
 export { useLayout } from "./layout/useLayout";
 export { useLayoutMenu } from "./layout/useLayoutMenu";

src/settings.ts

@@ -34,6 +34,21 @@ export const defaultSettings: AppSettings = {
   sidebarColorScheme: SidebarColor.CLASSIC_BLUE,
 };
 
+/**
+ * 认证功能配置
+ */
+export const authConfig = {
+  /**
+   * Token自动刷新开关
+   *
+   * true: 启用自动刷新 - ACCESS_TOKEN_INVALID时尝试刷新token
+   * false: 禁用自动刷新 - ACCESS_TOKEN_INVALID时直接跳转登录页
+   *
+   * 适用场景：后端没有刷新接口或不需要自动刷新的项目可设为false
+   */
+  enableTokenRefresh: true,
+} as const;
+
 // 主题色预设 - 经典配色方案
 // 注意：修改默认主题色时，需要同步修改 src/styles/variables.scss 中的 primary.base 值
 export const themeColorPresets = [

src/utils/auth.ts

@@ -1,5 +1,7 @@
 import { Storage } from "./storage";
 import { AUTH_KEYS } from "@/constants";
+import { useUserStoreHook } from "@/store/modules/user-store";
+import router from "@/router";
 
 // 负责本地凭证与偏好的读写
 export const AuthStorage = {
@@ -41,3 +43,25 @@ export const AuthStorage = {
     return Storage.get<boolean>(AUTH_KEYS.REMEMBER_ME, false);
   },
 };
+
+/**
+ * 重定向到登录页面
+ */
+export async function redirectToLogin(message: string = "请重新登录"): Promise<void> {
+  try {
+    ElNotification({
+      title: "提示",
+      message,
+      type: "warning",
+      duration: 3000,
+    });
+
+    await useUserStoreHook().resetAllState();
+
+    // 跳转到登录页，保留当前路由用于登录后跳转
+    const currentPath = router.currentRoute.value.fullPath;
+    await router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
+  } catch (error) {
+    console.error("Redirect to login error:", error);
+  }
+}

src/utils/request.ts

@@ -1,9 +1,12 @@
 import axios, { type InternalAxiosRequestConfig, type AxiosResponse } from "axios";
 import qs from "qs";
-import { useUserStoreHook } from "@/store/modules/user-store";
 import { ApiCodeEnum } from "@/enums/api/code-enum";
-import { AuthStorage } from "@/utils/auth";
-import router from "@/router";
+import { AuthStorage, redirectToLogin } from "@/utils/auth";
+import { useTokenRefresh } from "@/composables/auth/useTokenRefresh";
+import { authConfig } from "@/settings";
+
+// 初始化token刷新组合式函数
+const { refreshTokenAndRetry } = useTokenRefresh();
 
 /**
  * 创建 HTTP 请求实例
@@ -42,8 +45,8 @@ httpRequest.interceptors.request.use(
  */
 httpRequest.interceptors.response.use(
   (response: AxiosResponse<ApiResponse>) => {
-    // 如果响应是二进制流，则直接返回（用于文件下载、Excel 导出等）
-    if (response.config.responseType === "blob") {
+    // 如果响应是二进制数据，则直接返回response对象（用于文件下载、Excel导出、图片显示等）
+    if (response.config.responseType === "blob" || response.config.responseType === "arraybuffer") {
       return response;
     }
 
@@ -73,8 +76,15 @@ httpRequest.interceptors.response.use(
 
     switch (code) {
       case ApiCodeEnum.ACCESS_TOKEN_INVALID:
-        // Access Token 过期，尝试刷新
-        return refreshTokenAndRetry(config);
+        // Access Token 过期
+        if (authConfig.enableTokenRefresh) {
+          // 启用了token刷新，尝试刷新
+          return refreshTokenAndRetry(config, httpRequest);
+        } else {
+          // 未启用token刷新，直接跳转登录页
+          await redirectToLogin("登录已过期，请重新登录");
+          return Promise.reject(new Error(msg || "Access Token Invalid"));
+        }
 
       case ApiCodeEnum.REFRESH_TOKEN_INVALID:
         // Refresh Token 过期，跳转登录页
@@ -88,87 +98,4 @@ httpRequest.interceptors.response.use(
   }
 );
 
-/**
- * 重试请求的回调函数类型
- */
-type RetryCallback = () => void;
-
-// Token 刷新相关状态
-let isRefreshingToken = false;
-const pendingRequests: RetryCallback[] = [];
-
-/**
- * 刷新 Token 并重试请求
- */
-async function refreshTokenAndRetry(config: InternalAxiosRequestConfig): Promise<any> {
-  return new Promise((resolve, reject) => {
-    // 封装需要重试的请求
-    const retryRequest = () => {
-      const newToken = AuthStorage.getAccessToken();
-      if (newToken && config.headers) {
-        config.headers.Authorization = `Bearer ${newToken}`;
-      }
-      httpRequest(config).then(resolve).catch(reject);
-    };
-
-    // 将请求加入等待队列
-    pendingRequests.push(retryRequest);
-
-    // 如果没有正在刷新，则开始刷新流程
-    if (!isRefreshingToken) {
-      isRefreshingToken = true;
-
-      useUserStoreHook()
-        .refreshToken()
-        .then(() => {
-          // 刷新成功，重试所有等待的请求
-          pendingRequests.forEach((callback) => {
-            try {
-              callback();
-            } catch (error) {
-              console.error("Retry request error:", error);
-            }
-          });
-          // 清空队列
-          pendingRequests.length = 0;
-        })
-        .catch(async (error) => {
-          console.error("Token refresh failed:", error);
-          // 刷新失败，清空队列并跳转登录页
-          pendingRequests.length = 0;
-          await redirectToLogin("登录状态已失效，请重新登录");
-          // 拒绝所有等待的请求
-          pendingRequests.forEach(() => {
-            reject(new Error("Token refresh failed"));
-          });
-        })
-        .finally(() => {
-          isRefreshingToken = false;
-        });
-    }
-  });
-}
-
-/**
- * 重定向到登录页面
- */
-async function redirectToLogin(message: string = "请重新登录"): Promise<void> {
-  try {
-    ElNotification({
-      title: "提示",
-      message,
-      type: "warning",
-      duration: 3000,
-    });
-
-    await useUserStoreHook().resetAllState();
-
-    // 跳转到登录页，保留当前路由用于登录后跳转
-    const currentPath = router.currentRoute.value.fullPath;
-    await router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
-  } catch (error) {
-    console.error("Redirect to login error:", error);
-  }
-}
-
 export default httpRequest;