262 lines
8.8 KiB
Plaintext
262 lines
8.8 KiB
Plaintext
<%
|
||
const { apiConfig, generateResponses, config } = it;
|
||
%>
|
||
|
||
import type { AxiosInstance, AxiosRequestConfig, HeadersDefaults, ResponseType, AxiosResponse } from "axios";
|
||
import axios from "axios";
|
||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||
import { Session } from '/@/utils/storage';
|
||
import qs from 'qs';
|
||
|
||
export type QueryParamsType = Record<string | number, any>;
|
||
|
||
// token 键定义
|
||
export const accessTokenKey = 'access-token';
|
||
export const refreshAccessTokenKey = `x-${accessTokenKey}`;
|
||
|
||
// 清除 token
|
||
export const clearAccessTokens = () => {
|
||
Session.remove(accessTokenKey);
|
||
Session.remove(refreshAccessTokenKey);
|
||
};
|
||
|
||
/**
|
||
* 解密 JWT token 的信息
|
||
* @param token jwt token 字符串
|
||
* @returns <any>object
|
||
*/
|
||
export function decryptJWT(token: string): any {
|
||
token = token.replace(/_/g, '/').replace(/-/g, '+');
|
||
var json = decodeURIComponent(escape(window.atob(token.split('.')[1])));
|
||
return JSON.parse(json);
|
||
}
|
||
|
||
/**
|
||
* 将 JWT 时间戳转换成 Date
|
||
* @description 主要针对 `exp`，`iat`，`nbf`
|
||
* @param timestamp 时间戳
|
||
* @returns Date 对象
|
||
*/
|
||
export function getJWTDate(timestamp: number): Date {
|
||
return new Date(timestamp * 1000);
|
||
}
|
||
|
||
/**
|
||
* 检查并存储授权信息
|
||
* @param res 响应对象
|
||
*/
|
||
export function checkAndStoreAuthentication(res: any): void {
|
||
// 读取响应报文头 token 信息
|
||
var accessToken = res.headers[accessTokenKey];
|
||
var refreshAccessToken = res.headers[refreshAccessTokenKey];
|
||
|
||
// 判断是否是无效 token
|
||
if (accessToken === 'invalid_token') {
|
||
clearAccessTokens();
|
||
}
|
||
// 判断是否存在刷新 token，如果存在则存储在本地
|
||
else if (refreshAccessToken && accessToken && accessToken !== 'invalid_token') {
|
||
Session.set(accessTokenKey, accessToken);
|
||
Session.set(refreshAccessTokenKey, refreshAccessToken);
|
||
}
|
||
}
|
||
|
||
export interface FullRequestParams extends Omit<AxiosRequestConfig, "data" | "params" | "url" | "responseType"> {
|
||
/** set parameter to `true` for call `securityWorker` for this request */
|
||
secure?: boolean;
|
||
/** request path */
|
||
path: string;
|
||
/** content type of request body */
|
||
type?: ContentType;
|
||
/** query params */
|
||
query?: QueryParamsType;
|
||
/** format of response (i.e. response.json() -> format: "json") */
|
||
format?: ResponseType;
|
||
/** request body */
|
||
body?: unknown;
|
||
}
|
||
|
||
export type RequestParams = Omit<FullRequestParams, "body" | "method" | "query" | "path">;
|
||
|
||
export interface ApiConfig<SecurityDataType = unknown> extends Omit<AxiosRequestConfig, "data" | "cancelToken"> {
|
||
securityWorker?: (securityData: SecurityDataType | null) => Promise<AxiosRequestConfig | void> | AxiosRequestConfig | void;
|
||
secure?: boolean;
|
||
format?: ResponseType;
|
||
}
|
||
|
||
export enum ContentType {
|
||
Json = "application/json",
|
||
FormData = "multipart/form-data",
|
||
UrlEncoded = "application/x-www-form-urlencoded",
|
||
Text = "text/plain",
|
||
}
|
||
|
||
export class HttpClient<SecurityDataType = unknown> {
|
||
public instance: AxiosInstance;
|
||
private securityData: SecurityDataType | null = null;
|
||
private securityWorker?: ApiConfig<SecurityDataType>["securityWorker"];
|
||
private secure?: boolean;
|
||
private format?: ResponseType;
|
||
|
||
constructor({ securityWorker, secure, format, ...axiosConfig }: ApiConfig<SecurityDataType> = {}) {
|
||
this.instance = axios.create({ ...axiosConfig, baseURL: axiosConfig.baseURL || "<%~ apiConfig.baseUrl %>" || import.meta.env.VITE_API_URL, timeout: axiosConfig.timeout ?? 50000 })
|
||
this.secure = secure;
|
||
this.format = format;
|
||
this.securityWorker = securityWorker;
|
||
}
|
||
|
||
public setSecurityData = (data: SecurityDataType | null) => {
|
||
this.securityData = data
|
||
}
|
||
|
||
protected mergeRequestParams(params1: AxiosRequestConfig, params2?: AxiosRequestConfig): AxiosRequestConfig {
|
||
const method = params1.method || (params2 && params2.method)
|
||
|
||
return {
|
||
...this.instance.defaults,
|
||
...params1,
|
||
...(params2 || {}),
|
||
headers: {
|
||
...((method && this.instance.defaults.headers[method.toLowerCase() as keyof HeadersDefaults]) || {}),
|
||
...(params1.headers || {}),
|
||
...((params2 && params2.headers) || {}),
|
||
},
|
||
};
|
||
}
|
||
|
||
protected stringifyFormItem(formItem: unknown) {
|
||
if (typeof formItem === "object" && formItem !== null) {
|
||
return JSON.stringify(formItem);
|
||
} else {
|
||
return `${formItem}`;
|
||
}
|
||
}
|
||
|
||
protected createFormData(input: Record<string, unknown>): FormData {
|
||
return Object.keys(input || {}).reduce((formData, key) => {
|
||
const property = input[key];
|
||
const propertyContent: any[] = (property instanceof Array) ? property : [property]
|
||
|
||
for (const formItem of propertyContent) {
|
||
const isFileType = formItem instanceof Blob || formItem instanceof File;
|
||
formData.append(
|
||
key,
|
||
isFileType ? formItem : this.stringifyFormItem(formItem)
|
||
);
|
||
}
|
||
|
||
return formData;
|
||
}, new FormData());
|
||
}
|
||
|
||
public request = async <T = any, _E = any>({
|
||
secure,
|
||
path,
|
||
type,
|
||
query,
|
||
format,
|
||
body,
|
||
...params
|
||
<% if (config.unwrapResponseData) { %>
|
||
}: FullRequestParams): Promise<T> => {
|
||
<% } else { %>
|
||
}: FullRequestParams): Promise<AxiosResponse<T>> => {
|
||
<% } %>
|
||
const secureParams = ((typeof secure === 'boolean' ? secure : this.secure) && this.securityWorker && (await this.securityWorker(this.securityData))) || {};
|
||
const requestParams = this.mergeRequestParams(params, secureParams);
|
||
const responseFormat = (format || this.format) || undefined;
|
||
|
||
if (type === ContentType.FormData && body && body !== null && typeof body === "object") {
|
||
body = this.createFormData(body as Record<string, unknown>);
|
||
}
|
||
|
||
if (type === ContentType.Text && body && body !== null && typeof body !== "string") {
|
||
body = JSON.stringify(body);
|
||
}
|
||
|
||
// 添加请求拦截器
|
||
this.instance.interceptors.request.use(
|
||
(config) => {
|
||
const accessToken = Session.get<string>(accessTokenKey);
|
||
if (accessToken) {
|
||
// 将 token 添加到请求报文头中
|
||
config.headers!['Authorization'] = `Bearer ${accessToken}`;
|
||
|
||
// 判断 accessToken 是否过期
|
||
const jwt: any = decryptJWT(accessToken);
|
||
const exp = getJWTDate(jwt.exp as number);
|
||
//token已过期
|
||
if (new Date() >= exp) {
|
||
// 获取刷新 token
|
||
const refreshAccessToken = Session.get<string>(refreshAccessTokenKey);
|
||
// 携带刷新 token
|
||
if (refreshAccessToken) {
|
||
config.headers!['X-Authorization'] = `Bearer ${refreshAccessToken}`;
|
||
}
|
||
}
|
||
}
|
||
return config;
|
||
},
|
||
(error) => {
|
||
// 对请求错误做些什么
|
||
return Promise.reject(error);
|
||
}
|
||
);
|
||
|
||
// 添加响应拦截器
|
||
this.instance.interceptors.response.use(
|
||
(response) => {
|
||
// 检查并存储授权信息
|
||
checkAndStoreAuthentication(response);
|
||
const res = response.data;
|
||
if (response.status === 401 || res.statusCode === 401) {
|
||
clearAccessTokens();
|
||
window.location.href = '/'; // 去登录页
|
||
ElMessageBox.alert('您已被登出，请重新登录', '提示', {})
|
||
.then(() => {})
|
||
.catch(() => {});
|
||
return response;
|
||
}
|
||
if (res.statusCode === 403) {
|
||
ElMessage.error('无权访问');
|
||
return response;
|
||
}
|
||
// 处理规范化结果错误
|
||
if (res.statusCode !== 200) {
|
||
var message = JSON.stringify(res.errors);
|
||
ElMessage.error(message);
|
||
}
|
||
return response;
|
||
},
|
||
(error) => {
|
||
// 对响应错误做点什么
|
||
if (error.message.indexOf('timeout') != -1) {
|
||
ElMessage.error('网络超时');
|
||
} else if (error.message == 'Network Error') {
|
||
ElMessage.error('网络连接错误');
|
||
} else {
|
||
if (error.response.data) ElMessage.error(error.response.statusText);
|
||
else ElMessage.error('接口路径找不到');
|
||
}
|
||
return Promise.reject(error);
|
||
}
|
||
);
|
||
|
||
return this.instance.request({
|
||
...requestParams,
|
||
headers: {
|
||
...(requestParams.headers || {}),
|
||
...(type && type !== ContentType.FormData ? { "Content-Type": type } : {}),
|
||
},
|
||
params: query,
|
||
responseType: responseFormat,
|
||
data: body,
|
||
url: path,
|
||
<% if (config.unwrapResponseData) { %>
|
||
}).then(response => response.data);
|
||
<% } else { %>
|
||
});
|
||
<% } %>
|
||
};
|
||
}
|