feat(projects): 请求拦截器添加刷新token

src/config/common/service.ts

@@ -41,3 +41,6 @@ export const ERROR_STATUS = {
 
 /** 不弹出错误信息的code */
 export const NO_ERROR_MSG_CODE: (string | number)[] = [];
+
+/** token失效需要刷新token的接口 */
+export const REFRESH_TOKEN_CODE: (string | number)[] = [66666];

src/service/api/auth.ts

@@ -35,3 +35,11 @@ export function fetchUserInfo() {
 export function fetchUserRoutes(userId: string = 'soybean') {
   return mockRequest.post<ApiRoute.Route>('/getUserRoutes', { userId });
 }
+
+export function fetchTestToken() {
+  return mockRequest.post('/testToken', { userName: 'Soybean' });
+}
+
+export function fetchUpdateToken(refreshToken: string) {
+  return mockRequest.post('/updateToken', { refreshToken });
+}

src/service/request/helpers.ts

@@ -0,0 +1,26 @@
+import type { AxiosRequestConfig } from 'axios';
+import { useAuthStore } from '@/store';
+import { getRefreshToken, setToken, setRefreshToken } from '@/utils';
+import { fetchUpdateToken } from '../api';
+
+/**
+ * 刷新token
+ * token失效时的请求配置
+ */
+export async function refreshToken(axiosConfig: AxiosRequestConfig) {
+  const { resetAuthStore } = useAuthStore();
+  const refreshToken = getRefreshToken();
+  const { data } = await fetchUpdateToken(refreshToken);
+  if (data) {
+    setToken(data.token);
+    setRefreshToken(data.refreshToken);
+    const config = { ...axiosConfig };
+    if (config.headers) {
+      config.headers.Authorization = data.token;
+    }
+    return config;
+  }
+
+  resetAuthStore(true);
+  return null;
+}

src/service/request/instance.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import type { AxiosRequestConfig, AxiosInstance, AxiosError, CancelTokenStatic } from 'axios';
-import { REQUEST_TIMEOUT } from '@/config';
+import { REQUEST_TIMEOUT, REFRESH_TOKEN_CODE } from '@/config';
 import {
   getToken,
   transformRequestData,
@@ -9,6 +9,7 @@ import {
   handleBackendError,
   handleServiceResult
 } from '@/utils';
+import { refreshToken } from './helpers';
 
 /**
  * 封装axios请求类
@@ -51,13 +52,23 @@ export default class CustomAxiosInstance {
       }
     );
     this.instance.interceptors.response.use(
-      response => {
+      async response => {
         const { status } = response;
         if (status === 200 || status < 300 || status === 304) {
           const backend = response.data as Service.BackendServiceResult;
+          // 请求成功
           if (backend.code === this.backendSuccessCode) {
             return handleServiceResult(null, backend.data);
           }
+
+          // token失效, 刷新token
+          if (REFRESH_TOKEN_CODE.includes(backend.code)) {
+            const config = await refreshToken(response.config);
+            if (config) {
+              return this.instance.request(config);
+            }
+          }
+
           const error = handleBackendError(backend);
           return handleServiceResult(error, null);
         }