refactor: 完善前端 axios 请求响应拦截器

continew-admin-common/src/main/java/top/charles7c/cnadmin/common/handler/GlobalExceptionHandler.java

@@ -143,13 +143,13 @@ public class GlobalExceptionHandler {
         String errorMsg;
         switch (e.getType()) {
             case NotLoginException.KICK_OUT:
-                errorMsg = "您已被踢下线";
+                errorMsg = "您已被踢下线。";
                 break;
             case NotLoginException.BE_REPLACED_MESSAGE:
-                errorMsg = "您已被顶下线";
+                errorMsg = "您已被顶下线。";
                 break;
             default:
-                errorMsg = "登录状态已过期，请重新登录";
+                errorMsg = "您的登录状态已过期，请重新登录。";
                 break;
         }
         LogContextHolder.setErrorMsg(errorMsg);

continew-admin-ui/src/utils/message-error-wrapper.ts

@@ -0,0 +1,11 @@
+import { Message, MessageReturn } from '@arco-design/web-vue';
+
+let messageInstance: MessageReturn | null;
+const messageErrorWrapper = (options: any) => {
+  if (messageInstance) {
+    messageInstance.close();
+  }
+  messageInstance = Message.error(options);
+};
+
+export default messageErrorWrapper;

continew-admin-ui/src/utils/modal-error-wrapper.ts

@@ -0,0 +1,11 @@
+import { Modal, ModalReturn } from '@arco-design/web-vue';
+
+let modalInstance: ModalReturn | null;
+const modalErrorWrapper = (options: any) => {
+  if (modalInstance) {
+    modalInstance.close();
+  }
+  modalInstance = Modal.error(options);
+};
+
+export default modalErrorWrapper;

continew-admin-ui/src/utils/request.ts

@@ -1,7 +1,9 @@
 import axios from 'axios';
 import type { AxiosRequestConfig, AxiosResponse } from 'axios';
-import { Message } from '@arco-design/web-vue';
+import { useLoginStore } from '@/store';
 import { getToken } from '@/utils/auth';
+import modalErrorWrapper from '@/utils/modal-error-wrapper';
+import messageErrorWrapper from '@/utils/message-error-wrapper';
 
 // default config
 if (import.meta.env.VITE_API_BASE_URL) {
@@ -9,6 +11,14 @@ if (import.meta.env.VITE_API_BASE_URL) {
   axios.defaults.timeout = 60000; // 1 分钟
 }
 
+export interface HttpResponse<T = unknown> {
+  success: boolean; // 是否成功
+  code: number; // 状态码
+  msg: string; // 状态信息
+  data: T; // 返回数据
+  timestamp: string; // 时间戳
+}
+
 // request interceptors
 axios.interceptors.request.use(
   (config: AxiosRequestConfig) => {
@@ -26,14 +36,6 @@ axios.interceptors.request.use(
   }
 );
 
-export interface HttpResponse<T = unknown> {
-  success: boolean; // 是否成功
-  code: number; // 状态码
-  msg: string; // 状态信息
-  data: T; // 返回数据
-  timestamp: string; // 时间戳
-}
-
 // response interceptors
 axios.interceptors.response.use(
   (response: AxiosResponse<HttpResponse>) => {
@@ -45,28 +47,34 @@ axios.interceptors.response.use(
       return response;
     }
 
-    // 操作成功则直接返回
     const res = response.data;
     if (res.success) {
       return res;
     }
-    // 操作失败，弹出错误提示
-    Message.error({
-      content: res.msg,
-      duration: 3000,
-    });
-    //
-    // if (res.code === 401) {
-    //   // 重定向路由到登录页面
-    // }
-    return Promise.reject(new Error(res.msg));
+    return Promise.reject(new Error(res.msg || '未知错误'));
   },
   (error) => {
-    const res = error.response.data;
-    Message.error({
-      content: res.msg || '网络错误',
-      duration: 3000,
+    const { response } = error;
+    const res = response.data;
+    if ([401].includes(res.code) && response.config.url !== '/auth/user/info') {
+      modalErrorWrapper({
+        title: '确认退出',
+        content: res.msg,
+        maskClosable: false,
+        escToClose: false,
+        okText: '重新登录',
+        async onOk() {
+          const userStore = useLoginStore();
+          await userStore.logout();
+          window.location.reload();
+        },
       });
+    } else {
+      messageErrorWrapper({
+        content: res.msg || '网络错误',
+        duration: 5 * 1000,
+      });
+    }
     return Promise.reject(error);
   }
 );