优化：优化前端 axios 配置

continew-admin-ui/src/api/interceptor.ts

@@ -1,55 +0,0 @@
-import axios from 'axios';
-import type { AxiosRequestConfig, AxiosResponse } from 'axios';
-import { Message } from '@arco-design/web-vue';
-import { getToken } from '@/utils/auth';
-
-export interface HttpResponse<T = unknown> {
-  success: boolean; // 是否成功
-  code: number; // 状态码
-  msg: string; // 状态信息
-  timestamp: string; // 时间戳
-  data: T; // 返回数据
-}
-
-if (import.meta.env.VITE_API_BASE_URL) {
-  axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL;
-}
-
-axios.interceptors.request.use(
-  (config: AxiosRequestConfig) => {
-    // let each request carry token
-    // this example using the JWT token
-    // Authorization is a custom headers key
-    // please modify it according to the actual situation
-    const token = getToken();
-    if (token) {
-      if (!config.headers) {
-        config.headers = {};
-      }
-      config.headers.Authorization = `Bearer ${token}`;
-    }
-    return config;
-  },
-  (error) => {
-    // do something
-    return Promise.reject(error);
-  }
-);
-// add response interceptors
-axios.interceptors.response.use(
-  (response: AxiosResponse<HttpResponse>) => {
-    const res = response.data;
-    if (!res.success) {
-      Message.error(res.msg);
-    }
-    return res;
-  },
-  (error) => {
-    const res = error.response.data;
-    Message.error({
-      content: res.msg || '网络错误',
-      duration: 3 * 1000,
-    });
-    return Promise.reject(error);
-  }
-);

continew-admin-ui/src/api/system/dept.ts

@@ -1,6 +1,8 @@
 import axios from 'axios';
 import qs from 'query-string';
 
+const BASE_URL = '/system/dept';
+
 export interface DeptRecord {
   deptId?: number;
   deptName: string;
@@ -21,7 +23,7 @@ export interface DeptParams {
 }
 
 export function listDept(params: DeptParams) {
-  return axios.get<DeptRecord[]>('/system/dept/all', {
+  return axios.get<DeptRecord[]>(`${BASE_URL}/all`, {
     params,
     paramsSerializer: (obj) => {
       return qs.stringify(obj);
@@ -30,17 +32,17 @@ export function listDept(params: DeptParams) {
 }
 
 export function getDept(id: number) {
-  return axios.get<DeptRecord>(`/system/dept/${id}`);
+  return axios.get<DeptRecord>(`${BASE_URL}/${id}`);
 }
 
 export function createDept(req: DeptRecord) {
-  return axios.post('/system/dept', req);
+  return axios.post(BASE_URL, req);
 }
 
 export function updateDept(req: DeptRecord) {
-  return axios.put(`/system/dept`, req);
+  return axios.put(BASE_URL, req);
 }
 
 export function deleteDept(ids: number | Array<number>) {
-  return axios.delete(`/system/dept/${ids}`);
+  return axios.delete(`${BASE_URL}/${ids}`);
 }

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

@@ -1,6 +1,6 @@
 import { ref, UnwrapRef } from 'vue';
 import { AxiosResponse } from 'axios';
-import { HttpResponse } from '@/api/interceptor';
+import { HttpResponse } from '@/utils/request';
 import useLoading from './loading';
 
 // use to fetch list

continew-admin-ui/src/main.ts

@@ -10,7 +10,7 @@ import './mock';
 import App from './App.vue';
 import '@arco-design/web-vue/dist/arco.css';
 import '@/assets/style/global.less';
-import '@/api/interceptor';
+import '@/utils/request';
 
 const app = createApp(App);
 

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

@@ -0,0 +1,63 @@
+import axios from "axios";
+import type { AxiosRequestConfig, AxiosResponse } from "axios";
+import { Message } from "@arco-design/web-vue";
+import { getToken } from "@/utils/auth";
+
+// default config
+if (import.meta.env.VITE_API_BASE_URL) {
+  axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL;
+  axios.defaults.timeout = 60000 // 1 分钟
+}
+
+// request interceptors
+axios.interceptors.request.use((config: AxiosRequestConfig) => {
+    const token = getToken();
+    if (token) {
+      if (!config.headers) {
+        config.headers = {};
+      }
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    console.log(error);
+    return Promise.reject(error);
+  }
+);
+
+export interface HttpResponse<T = unknown> {
+  success: boolean; // 是否成功
+  code: number; // 状态码
+  msg: string; // 状态信息
+  timestamp: string; // 时间戳
+  data: T; // 返回数据
+}
+
+// response interceptors
+axios.interceptors.response.use((response: AxiosResponse<HttpResponse>) => {
+    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));
+  },
+  (error) => {
+    console.error(`err: ${error}`);
+    const res = error.response.data;
+    Message.error({
+      content: res.msg || "网络错误",
+      duration: 3000
+    });
+    return Promise.reject(error);
+  }
+);

continew-admin-ui/src/views/system/dept/index.vue

@@ -132,6 +132,7 @@
                   allow-search
                   :filter-tree-node="filterDeptTree"
                   :fallback-option="false"
+                  size="large"
                 />
               </a-form-item>
               <a-form-item label="部门名称" field="deptName">