第一步

frontend/src/api/client.js

@@ -0,0 +1,35 @@
+import axios from 'axios';
+import { ElMessage } from 'element-plus';
+const apiClient = axios.create({
+    baseURL: '/api',
+    timeout: 30000,
+    withCredentials: true,
+    headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+    },
+});
+// 响应拦截：统一错误处理
+apiClient.interceptors.response.use((response) => response, (error) => {
+    if (error.response) {
+        const { status, data } = error.response;
+        // 未登录 → 跳转登录页
+        if (status === 401) {
+            // 避免在登录页循环跳转
+            if (window.location.pathname !== '/login') {
+                window.location.href = '/login';
+            }
+            return Promise.reject(error);
+        }
+        // 业务错误：显示服务端中文文案
+        const message = data?.message || '请求失败';
+        ElMessage.error(message);
+    }
+    else if (error.request) {
+        ElMessage.error('网络错误，请检查连接。');
+    }
+    else {
+        ElMessage.error('请求配置错误。');
+    }
+    return Promise.reject(error);
+});
+export default apiClient;

frontend/src/api/client.ts

@@ -0,0 +1,41 @@
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+
+const apiClient = axios.create({
+  baseURL: '/api',
+  timeout: 30000,
+  withCredentials: true,
+  headers: {
+    'X-Requested-With': 'XMLHttpRequest',
+  },
+})
+
+// 响应拦截：统一错误处理
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response) {
+      const { status, data } = error.response
+
+      // 未登录 → 跳转登录页
+      if (status === 401) {
+        // 避免在登录页循环跳转
+        if (window.location.pathname !== '/login') {
+          window.location.href = '/login'
+        }
+        return Promise.reject(error)
+      }
+
+      // 业务错误：显示服务端中文文案
+      const message = data?.message || '请求失败'
+      ElMessage.error(message)
+    } else if (error.request) {
+      ElMessage.error('网络错误，请检查连接。')
+    } else {
+      ElMessage.error('请求配置错误。')
+    }
+    return Promise.reject(error)
+  },
+)
+
+export default apiClient