/** * 该文件可自行根据业务逻辑进行调整 */ import type { RequestClientOptions } from '@vben/request'; import { useAppConfig } from '@vben/hooks'; import { preferences } from '@vben/preferences'; import { authenticateResponseInterceptor, defaultResponseInterceptor, errorMessageResponseInterceptor, RequestClient, } from '@vben/request'; import { useAccessStore } from '@vben/stores'; import { ElMessage } from 'element-plus'; import { useAuthStore, useTokenStore } from '#/store'; // cc:增加token存储 import { refreshTokenApi } from './core'; const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD); function createRequestClient(baseURL: string, options?: RequestClientOptions) { const client = new RequestClient({ ...options, baseURL, }); /** * 重新认证逻辑 */ async function doReAuthenticate() { console.warn('Access token or refresh token is invalid or expired. '); const accessStore = useAccessStore(); const authStore = useAuthStore(); accessStore.setAccessToken(null); if ( preferences.app.loginExpiredMode === 'modal' && accessStore.isAccessChecked ) { accessStore.setLoginExpired(true); } else { await authStore.logout(); } } /** * 刷新token逻辑 */ async function doRefreshToken() { const accessStore = useAccessStore(); const resp = await refreshTokenApi(); const newToken = resp.data; accessStore.setAccessToken(newToken); return newToken; } function formatToken(token: null | string) { return token ? `Bearer ${token}` : null; } // 请求头处理 client.addRequestInterceptor({ fulfilled: async (config) => { const accessStore = useAccessStore(); config.headers.Authorization = formatToken(accessStore.accessToken); config.headers['Accept-Language'] = preferences.app.locale; return config; }, }); // 处理返回的响应数据格式 client.addResponseInterceptor( defaultResponseInterceptor({ codeField: 'code', dataField: 'data', successCode: 0, }), ); // token过期的处理 client.addResponseInterceptor( authenticateResponseInterceptor({ client, doReAuthenticate, doRefreshToken, enableRefreshToken: preferences.app.enableRefreshToken, formatToken, }), ); // 通用的错误处理,如果没有进入上面的错误处理逻辑,就会进入这里 client.addResponseInterceptor( errorMessageResponseInterceptor((msg: string, error) => { // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理,根据不同的 code 做不同的提示,而不是直接使用 message.error 提示 msg // 当前mock接口返回的错误字段是 error 或者 message const responseData = error?.response?.data ?? {}; const errorMessage = responseData?.error ?? responseData?.message ?? ''; // 如果没有错误信息,则会根据状态码进行提示 ElMessage.error(errorMessage || msg); }), ); return client; } export const requestClient = createRequestClient(apiURL, { responseReturn: 'data', }); export const baseRequestClient = new RequestClient({ baseURL: apiURL }); // ////////////////////////////////////////////////////////////////////////////////// // cc:自定义请求 function createCDCMRequestClient( baseURL: string, options?: RequestClientOptions, ) { const client = new RequestClient({ ...options, baseURL, }); client.addResponseInterceptor( defaultResponseInterceptor({ codeField: 'code', dataField: 'data', successCode: 0, }), ); // 响应拦截器:自动更新 token client.addResponseInterceptor({ fulfilled: (response) => { const token = response.headers?.token; if (token) { // 如果响应头中有新 token,自动更新 store useTokenStore().setToken(token); } return response; }, rejected: (error) => { // 统一错误处理(如 token 过期) if (error.response?.status === 401) { useTokenStore().deleteToken(); // 这里要跳登录页面 } return Promise.reject(error); }, }); // 请求拦截器:自动添加 token client.addRequestInterceptor({ fulfilled: (config) => { const token = useTokenStore().token; if (token) { // 添加 CDCM 自定义头部 config.headers.set('cdcm', token, true); } return config; }, rejected: (error) => { // 请求错误处理 return Promise.reject(error); }, }); return client; } export const cdcmRequestClient = createCDCMRequestClient(apiURL);