241 lines
7.9 KiB
TypeScript
241 lines
7.9 KiB
TypeScript
|
import type { AxiosRequestConfig, Method } from 'axios'
|
||
|
|
import axios from 'axios'
|
||
|
|
import { ElLoading, ElNotification, type LoadingOptions } from 'element-plus'
|
||
|
|
import { refreshToken } from '@/api/user-boot/user'
|
||
|
|
import router from '@/router/index'
|
||
|
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||
|
|
|
||
|
|
window.requests = []
|
||
|
|
window.tokenRefreshing = false
|
||
|
|
const pendingMap = new Map()
|
||
|
|
const loadingInstance: LoadingInstance = {
|
||
|
|
target: null,
|
||
|
|
count: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 根据运行环境获取基础请求URL
|
||
|
|
*/
|
||
|
|
export const getUrl = (): string => {
|
||
|
|
return '/api'
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 创建`Axios`
|
||
|
|
* 默认开启`reductDataFormat(简洁响应)`,返回类型为`ApiPromise`
|
||
|
|
* 关闭`reductDataFormat`,返回类型则为`AxiosPromise`
|
||
|
|
*/
|
||
|
|
function createAxios<Data = any, T = ApiPromise<Data>>(
|
||
|
|
axiosConfig: AxiosRequestConfig,
|
||
|
|
options: Options = {},
|
||
|
|
loading: LoadingOptions = {}
|
||
|
|
): T {
|
||
|
|
const adminInfo = useAdminInfo()
|
||
|
|
|
||
|
|
const Axios = axios.create({
|
||
|
|
baseURL: getUrl(),
|
||
|
|
timeout: 1000 * 60 * 5,
|
||
|
|
headers: {},
|
||
|
|
responseType: 'json'
|
||
|
|
})
|
||
|
|
|
||
|
|
options = Object.assign(
|
||
|
|
{
|
||
|
|
CancelDuplicateRequest: true, // 是否开启取消重复请求, 默认为 true
|
||
|
|
loading: false, // 是否开启loading层效果, 默认为false
|
||
|
|
reductDataFormat: true, // 是否开启简洁的数据结构响应, 默认为true
|
||
|
|
showErrorMessage: true, // 是否开启接口错误信息展示,默认为true
|
||
|
|
showCodeMessage: true, // 是否开启code不为1时的信息提示, 默认为true
|
||
|
|
showSuccessMessage: false, // 是否开启code为1时的信息提示, 默认为false
|
||
|
|
anotherToken: '' // 当前请求使用另外的用户token
|
||
|
|
},
|
||
|
|
options
|
||
|
|
)
|
||
|
|
|
||
|
|
// 请求拦截
|
||
|
|
Axios.interceptors.request.use(
|
||
|
|
config => {
|
||
|
|
removePending(config)
|
||
|
|
options.CancelDuplicateRequest && addPending(config)
|
||
|
|
// 创建loading实例
|
||
|
|
if (options.loading) {
|
||
|
|
loadingInstance.count++
|
||
|
|
if (loadingInstance.count === 1) {
|
||
|
|
loadingInstance.target = ElLoading.service(loading)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 自动携带token
|
||
|
|
if (config.headers) {
|
||
|
|
const token = adminInfo.getToken()
|
||
|
|
if (token) {
|
||
|
|
;(config.headers as anyObj).Authorization = token
|
||
|
|
} else {
|
||
|
|
config.headers.Authorization = 'Basic bmpjbnRlc3Q6bmpjbnBxcw=='
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return config
|
||
|
|
},
|
||
|
|
error => {
|
||
|
|
return Promise.reject(error)
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
// 响应拦截
|
||
|
|
Axios.interceptors.response.use(
|
||
|
|
response => {
|
||
|
|
removePending(response.config)
|
||
|
|
options.loading && closeLoading(options) // 关闭loading
|
||
|
|
if (
|
||
|
|
response.data.code === 'A0000' ||
|
||
|
|
response.data.type === 'application/json' ||
|
||
|
|
response.data.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||
|
|
) {
|
||
|
|
return options.reductDataFormat ? response.data : response
|
||
|
|
} else if (response.data.code == 'A0202') {
|
||
|
|
if (!window.tokenRefreshing) {
|
||
|
|
window.tokenRefreshing = true
|
||
|
|
return refreshToken()
|
||
|
|
.then(res => {
|
||
|
|
adminInfo.setToken(res.data.token, 'auth')
|
||
|
|
response.headers.Authorization = `${res.data.token}`
|
||
|
|
window.requests.forEach(cb => cb(res.data.token))
|
||
|
|
window.requests = []
|
||
|
|
return Axios(response.config)
|
||
|
|
})
|
||
|
|
.catch(err => {
|
||
|
|
adminInfo.removeToken()
|
||
|
|
router.push({ name: 'login' })
|
||
|
|
return Promise.reject(err)
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
window.tokenRefreshing = false
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
return new Promise(resolve => {
|
||
|
|
// 用函数形式将 resolve 存入，等待刷新后再执行
|
||
|
|
window.requests.push((token: string) => {
|
||
|
|
response.headers.Authorization = `${token}`
|
||
|
|
resolve(Axios(response.config))
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
} else if (response.data.code == 'A0024') {
|
||
|
|
// 登录失效
|
||
|
|
ElNotification({
|
||
|
|
type: 'error',
|
||
|
|
message: response.data.message
|
||
|
|
})
|
||
|
|
adminInfo.removeToken()
|
||
|
|
router.push({ name: 'login' })
|
||
|
|
return Promise.reject(response.data)
|
||
|
|
} else {
|
||
|
|
if (options.showCodeMessage) {
|
||
|
|
ElNotification({
|
||
|
|
type: 'error',
|
||
|
|
message: response.data.message || '未知错误'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
return Promise.reject(response.data)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error => {
|
||
|
|
error.config && removePending(error.config)
|
||
|
|
options.loading && closeLoading(options) // 关闭loading
|
||
|
|
return Promise.reject(error) // 错误继续返回给到具体页面
|
||
|
|
}
|
||
|
|
)
|
||
|
|
return Axios(axiosConfig) as T
|
||
|
|
}
|
||
|
|
|
||
|
|
export default createAxios
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 关闭Loading层实例
|
||
|
|
*/
|
||
|
|
function closeLoading(options: Options) {
|
||
|
|
if (options.loading && loadingInstance.count > 0) loadingInstance.count--
|
||
|
|
if (loadingInstance.count === 0) {
|
||
|
|
loadingInstance.target.close()
|
||
|
|
loadingInstance.target = null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 储存每个请求的唯一cancel回调, 以此为标识
|
||
|
|
*/
|
||
|
|
function addPending(config: AxiosRequestConfig) {
|
||
|
|
const pendingKey = getPendingKey(config)
|
||
|
|
config.cancelToken =
|
||
|
|
config.cancelToken ||
|
||
|
|
new axios.CancelToken(cancel => {
|
||
|
|
if (!pendingMap.has(pendingKey)) {
|
||
|
|
pendingMap.set(pendingKey, cancel)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 删除重复的请求
|
||
|
|
*/
|
||
|
|
function removePending(config: AxiosRequestConfig) {
|
||
|
|
const pendingKey = getPendingKey(config)
|
||
|
|
if (pendingMap.has(pendingKey)) {
|
||
|
|
const cancelToken = pendingMap.get(pendingKey)
|
||
|
|
cancelToken(pendingKey)
|
||
|
|
pendingMap.delete(pendingKey)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 生成每个请求的唯一key
|
||
|
|
*/
|
||
|
|
function getPendingKey(config: AxiosRequestConfig) {
|
||
|
|
let { data } = config
|
||
|
|
const { url, method, params, headers } = config
|
||
|
|
if (typeof data === 'string') data = JSON.parse(data) // response里面返回的config.data是个字符串对象
|
||
|
|
return [
|
||
|
|
url,
|
||
|
|
method,
|
||
|
|
headers && (headers as anyObj).Authorization ? (headers as anyObj).Authorization : '',
|
||
|
|
headers && (headers as anyObj)['ba-user-token'] ? (headers as anyObj)['ba-user-token'] : '',
|
||
|
|
JSON.stringify(params),
|
||
|
|
JSON.stringify(data)
|
||
|
|
].join('&')
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 根据请求方法组装请求数据/参数
|
||
|
|
*/
|
||
|
|
export function requestPayload(method: Method, data: anyObj) {
|
||
|
|
if (method == 'GET') {
|
||
|
|
return {
|
||
|
|
params: data
|
||
|
|
}
|
||
|
|
} else if (method == 'POST') {
|
||
|
|
return {
|
||
|
|
data: data
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
interface LoadingInstance {
|
||
|
|
target: any
|
||
|
|
count: number
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Options {
|
||
|
|
// 是否开启取消重复请求, 默认为 true
|
||
|
|
CancelDuplicateRequest?: boolean
|
||
|
|
// 是否开启loading层效果, 默认为false
|
||
|
|
loading?: boolean
|
||
|
|
// 是否开启简洁的数据结构响应, 默认为true
|
||
|
|
reductDataFormat?: boolean
|
||
|
|
// 是否开启code不为A0000时的信息提示, 默认为true
|
||
|
|
showCodeMessage?: boolean
|
||
|
|
// 是否开启code为0时的信息提示, 默认为false
|
||
|
|
showSuccessMessage?: boolean
|
||
|
|
// 当前请求使用另外的用户token
|
||
|
|
anotherToken?: string
|
||
|
|
}
|