mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-11-16 13:43:42 +08:00
feat: refactor all pages with @sa/alova
This commit is contained in:
@@ -12,6 +12,6 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@sa/utils": "workspace:*",
|
||||
"alova": "^3.0.16"
|
||||
"alova": "^3.0.19"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,2 @@
|
||||
/** request id key */
|
||||
export const REQUEST_ID_KEY = 'X-Request-Id';
|
||||
|
||||
/** the backend error code key */
|
||||
export const BACKEND_ERROR_CODE = 'BACKEND_ERROR';
|
||||
|
||||
@@ -1,86 +1,76 @@
|
||||
import type { AlovaDefaultCacheAdapter, AlovaGenerics, AlovaGlobalCacheAdapter, AlovaRequestAdapter } from 'alova';
|
||||
import { createAlova } from 'alova';
|
||||
import VueHook from 'alova/vue';
|
||||
import type { FetchRequestInit } from 'alova/fetch';
|
||||
import adapterFetch from 'alova/fetch';
|
||||
import { createServerTokenAuthentication } from 'alova/client';
|
||||
import { BACKEND_ERROR_CODE, REQUEST_ID_KEY } from './constant';
|
||||
import { isJSON } from './shared';
|
||||
import { BACKEND_ERROR_CODE } from './constant';
|
||||
import type { CustomAlovaConfig, RequestOptions } from './type';
|
||||
|
||||
export const createAlovaRequest = (customConfig: CustomAlovaConfig<any>, options: RequestOptions<any>) => {
|
||||
const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication({
|
||||
export const createAlovaRequest = <
|
||||
RequestConfig = FetchRequestInit,
|
||||
ResponseType = Response,
|
||||
ResponseHeader = Headers,
|
||||
L1Cache extends AlovaGlobalCacheAdapter = AlovaDefaultCacheAdapter,
|
||||
L2Cache extends AlovaGlobalCacheAdapter = AlovaDefaultCacheAdapter
|
||||
>(
|
||||
customConfig: CustomAlovaConfig<
|
||||
AlovaGenerics<any, any, RequestConfig, ResponseType, ResponseHeader, L1Cache, L2Cache, any>
|
||||
>,
|
||||
options: RequestOptions<AlovaGenerics<any, any, RequestConfig, ResponseType, ResponseHeader, L1Cache, L2Cache, any>>
|
||||
) => {
|
||||
const { tokenRefresher } = options;
|
||||
const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication<
|
||||
typeof VueHook,
|
||||
AlovaRequestAdapter<RequestConfig, ResponseType, ResponseHeader>
|
||||
>({
|
||||
refreshTokenOnSuccess: {
|
||||
isExpired: async response => {
|
||||
const contentType = response.headers.get('Content-Type');
|
||||
if (isJSON(contentType ?? '')) {
|
||||
const resp = response.clone();
|
||||
const data = await resp.json();
|
||||
const responseCode = String(data.code);
|
||||
if (customConfig.expiredTokenCodes.includes(responseCode)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
handler: async () => {
|
||||
if (options.refreshTokenHandler) {
|
||||
await options.refreshTokenHandler();
|
||||
}
|
||||
}
|
||||
isExpired: (response, method) => tokenRefresher?.isExpired(response, method) || false,
|
||||
handler: async (response, method) => tokenRefresher?.handler(response, method)
|
||||
},
|
||||
refreshTokenOnError: {
|
||||
isExpired: async response => {
|
||||
const contentType = response.headers.get('Content-Type');
|
||||
if (isJSON(contentType ?? '')) {
|
||||
const resp = response.clone();
|
||||
const data = await resp.json();
|
||||
const responseCode = String(data.code);
|
||||
if (customConfig.expiredTokenCodes.includes(responseCode)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
handler: async () => {
|
||||
if (options.refreshTokenHandler) {
|
||||
await options.refreshTokenHandler();
|
||||
}
|
||||
}
|
||||
isExpired: (response, method) => tokenRefresher?.isExpired(response, method) || false,
|
||||
handler: async (response, method) => tokenRefresher?.handler(response, method)
|
||||
}
|
||||
});
|
||||
|
||||
const instance = createAlova({
|
||||
...customConfig,
|
||||
timeout: customConfig.timeout ?? 10 * 1000,
|
||||
requestAdapter: customConfig.requestAdapter ?? adapterFetch(),
|
||||
requestAdapter: (customConfig.requestAdapter as any) ?? adapterFetch(),
|
||||
statesHook: VueHook,
|
||||
beforeRequest: onAuthRequired(options.onRequest),
|
||||
beforeRequest: onAuthRequired(options.onRequest as any),
|
||||
responded: onResponseRefreshToken({
|
||||
onSuccess: async resp => {
|
||||
onSuccess: async (response, method) => {
|
||||
// check if http status is success
|
||||
if (resp.ok || resp.status === 304) {
|
||||
if (
|
||||
!isJSON(resp.headers.get('Content-Type') ?? '') ||
|
||||
(options.isBackendSuccess && (await options.isBackendSuccess(resp)))
|
||||
) {
|
||||
return options.transformBackendResponse ? await options.transformBackendResponse(resp) : resp;
|
||||
}
|
||||
if (options.onBackendFail) {
|
||||
const fail = await options.onBackendFail(resp);
|
||||
if (fail) {
|
||||
return fail;
|
||||
}
|
||||
let error: any = null;
|
||||
let transformedData: any = null;
|
||||
try {
|
||||
if (await options.isBackendSuccess(response)) {
|
||||
transformedData = await options.transformBackendResponse(response);
|
||||
} else {
|
||||
error = new Error('the backend request error');
|
||||
error.code = BACKEND_ERROR_CODE;
|
||||
}
|
||||
} catch (err) {
|
||||
error = err;
|
||||
}
|
||||
throw new Error(resp.statusText);
|
||||
|
||||
if (error) {
|
||||
await options.onError?.(error, response, method);
|
||||
throw error;
|
||||
}
|
||||
|
||||
return transformedData;
|
||||
},
|
||||
onComplete: options.onComplete,
|
||||
onError: options.onError
|
||||
onError: (error, method) => options.onError?.(error, null, method)
|
||||
})
|
||||
});
|
||||
|
||||
return instance;
|
||||
};
|
||||
|
||||
export { BACKEND_ERROR_CODE, REQUEST_ID_KEY };
|
||||
export { BACKEND_ERROR_CODE };
|
||||
export type * from './type';
|
||||
export type * from 'alova';
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
export function isJSON(contentType: string) {
|
||||
return contentType.includes('application/json');
|
||||
}
|
||||
@@ -1,18 +1,9 @@
|
||||
import type {
|
||||
AlovaGenerics,
|
||||
AlovaOptions,
|
||||
AlovaRequestAdapter,
|
||||
Method,
|
||||
ResponseCompleteHandler,
|
||||
ResponseErrorHandler
|
||||
} from 'alova';
|
||||
import type { AlovaGenerics, AlovaOptions, AlovaRequestAdapter, Method, ResponseCompleteHandler } from 'alova';
|
||||
|
||||
export type CustomAlovaConfig<AG extends AlovaGenerics> = Omit<
|
||||
AlovaOptions<AG>,
|
||||
'statesHook' | 'beforeRequest' | 'responded' | 'requestAdapter'
|
||||
> & {
|
||||
/** expired token codes */
|
||||
expiredTokenCodes: string[];
|
||||
/** request adapter. all request of alova will be sent by it. */
|
||||
requestAdapter?: AlovaRequestAdapter<AG['RequestConfig'], AG['Response'], AG['ResponseHeader']>;
|
||||
};
|
||||
@@ -25,26 +16,23 @@ export interface RequestOptions<AG extends AlovaGenerics> {
|
||||
*
|
||||
* @param method alova Method Instance
|
||||
*/
|
||||
onRequest?: (method: Method<AG>) => void | Promise<void>;
|
||||
onRequest?: AlovaOptions<AG>['beforeRequest'];
|
||||
/**
|
||||
* The hook to check backend response is success or not
|
||||
*
|
||||
* @param response Axios response
|
||||
* @param response alova response
|
||||
*/
|
||||
isBackendSuccess?: (response: Response) => Promise<boolean>;
|
||||
isBackendSuccess: (response: AG['Response']) => Promise<boolean>;
|
||||
|
||||
/** The hook to refresh token */
|
||||
refreshTokenHandler?: () => Promise<void>;
|
||||
/**
|
||||
* The hook after backend request fail
|
||||
*
|
||||
* For example: You can handle the expired token in this hook
|
||||
*
|
||||
* @param response Axios response
|
||||
* @param instance Axios instance
|
||||
*/
|
||||
onBackendFail?: (response: Response) => Promise<Response | null> | Promise<void>;
|
||||
/** The config to refresh token */
|
||||
tokenRefresher?: {
|
||||
/** detect the token is expired */
|
||||
isExpired(response: AG['Response'], Method: Method<AG>): Promise<boolean> | boolean;
|
||||
/** refhresh token handler */
|
||||
handler(response: AG['Response'], Method: Method<AG>): Promise<void>;
|
||||
};
|
||||
|
||||
/** The hook after backend request complete */
|
||||
onComplete?: ResponseCompleteHandler<AG>;
|
||||
|
||||
/**
|
||||
@@ -54,11 +42,11 @@ export interface RequestOptions<AG extends AlovaGenerics> {
|
||||
*
|
||||
* @param error
|
||||
*/
|
||||
onError?: ResponseErrorHandler<AG>;
|
||||
onError?: (error: any, response: AG['Response'] | null, methodInstance: Method<AG>) => any | Promise<any>;
|
||||
/**
|
||||
* transform backend response when the responseType is json
|
||||
*
|
||||
* @param response Axios response
|
||||
* @param response alova response
|
||||
*/
|
||||
transformBackendResponse?: (response: AG['Response']) => any | Promise<any>;
|
||||
transformBackendResponse: (response: AG['Response']) => any;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user