feat(projects): add request exception example page

This commit is contained in:
Soybean
2024-03-24 06:23:56 +08:00
parent 11a6a3bd80
commit 41e8bc44f8
11 changed files with 175 additions and 16 deletions

View File

@ -3,6 +3,7 @@ import { BACKEND_ERROR_CODE, createFlatRequest, createRequest } from '@sa/axios'
import { useAuthStore } from '@/store/modules/auth';
import { localStg } from '@/utils/storage';
import { getServiceBaseURL } from '@/utils/service';
import { $t } from '@/locales';
import { handleRefreshToken } from './shared';
const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y';
@ -32,28 +33,55 @@ export const request = createFlatRequest<App.Service.Response, InstanceState>(
return config;
},
isBackendSuccess(response) {
// when the backend response code is "0000", it means the request is success
// you can change this logic by yourself
return response.data.code === '0000';
// when the backend response code is "0000"(default), it means the request is success
// to change this logic by yourself, you can modify the `VITE_SERVICE_SUCCESS_CODE` in `.env` file
return response.data.code === import.meta.env.VITE_SERVICE_SUCCESS_CODE;
},
async onBackendFail(response, instance) {
// when the backend response code is not "0000", it means the request is fail
// for example: the token is expired, refresh token and retry request
const authStore = useAuthStore();
// when the backend response code is "8888", it means logout the system and redirect to login page
// the following code is an example, you can change it by yourself
const logoutCodes: (string | number)[] = ['8888'];
if (logoutCodes.includes(response.data.code)) {
function handleLogout() {
authStore.resetStore();
}
function logoutAndCleanup() {
handleLogout();
window.removeEventListener('beforeunload', handleLogout);
}
// when the backend response code is in `logoutCodes`, it means the user will be logged out and redirected to login page
const logoutCodes = import.meta.env.VITE_SERVICE_LOGOUT_CODES?.split(',') || [];
if (logoutCodes.includes(response.data.code)) {
handleLogout();
return null;
}
// when the backend response code is "9999", it means the token is expired, and refresh token
// the api `refreshToken` can not return the code "9999", otherwise it will be a dead loop, can return `logoutCodes`
const refreshTokenCodes: (string | number)[] = ['9999'];
if (refreshTokenCodes.includes(response.data.code) && !request.state.isRefreshingToken) {
// when the backend response code is in `modalLogoutCodes`, it means the user will be logged out by displaying a modal
const modalLogoutCodes = import.meta.env.VITE_SERVICE_MODAL_LOGOUT_CODES?.split(',') || [];
if (modalLogoutCodes.includes(response.data.code)) {
// prevent the user from refreshing the page
window.addEventListener('beforeunload', handleLogout);
window.$dialog?.error({
title: 'Error',
content: response.data.msg,
positiveText: $t('common.confirm'),
maskClosable: false,
onPositiveClick() {
logoutAndCleanup();
},
onClose() {
logoutAndCleanup();
}
});
return null;
}
// when the backend response code is in `expiredTokenCodes`, it means the token is expired, and refresh token
// the api `refreshToken` can not return error code in `expiredTokenCodes`, otherwise it will be a dead loop, should return `logoutCodes` or `modalLogoutCodes`
const expiredTokenCodes = import.meta.env.VITE_SERVICE_EXPIRED_TOKEN_CODES?.split(',') || [];
if (expiredTokenCodes.includes(response.data.code) && !request.state.isRefreshingToken) {
request.state.isRefreshingToken = true;
const refreshConfig = await handleRefreshToken(response.config);
@ -74,13 +102,27 @@ export const request = createFlatRequest<App.Service.Response, InstanceState>(
// when the request is fail, you can show error message
let message = error.message;
let backendErrorCode = '';
// show backend error message
// get backend error message and code
if (error.code === BACKEND_ERROR_CODE) {
message = error.response?.data?.msg || message;
backendErrorCode = error.response?.data?.code || '';
}
window.$message?.error(message);
// the error message is displayed in the modal
const modalLogoutCodes = import.meta.env.VITE_SERVICE_MODAL_LOGOUT_CODES?.split(',') || [];
if (modalLogoutCodes.includes(backendErrorCode)) {
return;
}
// when the token is expired, refresh token and retry request, so no need to show error message
const expiredTokenCodes = import.meta.env.VITE_SERVICE_EXPIRED_TOKEN_CODES?.split(',') || [];
if (expiredTokenCodes.includes(backendErrorCode)) {
return;
}
window.$message?.error?.(message);
}
}
);