elementUI项目中,只弹一个【token过期提示】信息框的处理
关键代码
let msgArr = document.querySelectorAll('.token401Message')
if (!msgArr.length) {
Message({
customClass: 'token401Message',
message: response.data.msg,
type: 'error',
onClose: () => {
msgArr = []
}
})
}
完整代码
import axios from 'axios'
import { getToken } from '@/libs/util'
import { Message, Loading } from 'element-ui'
import store from '@/store'
import router from '@/router'
let loadingInstance = null // 记录页面中存在的loading
let loadingCount = 0 // 记录当前正在请求的数量
function showLoading(data) {
if (loadingCount === 0) {
loadingInstance = Loading.service({
lock: true,
background: 'rgba(255,255,255,.6)',
text: data || ''
})
}
loadingCount++
}
function hideLoading() {
let timer = setTimeout(() => {
loadingCount--
if (loadingInstance && loadingCount === 0) {
loadingInstance.close()
loadingInstance = null
clearTimeout(timer)
timer = null
}
}, 0)
}
const instance = axios.create({
// baseURL: baseUrl,
timeout: 0,
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
withCredentials: true
})
const no_need_to_refresh_token = [
'/xxx', // 双因子登录
'/xxx', // 验证码登录
'/xxx', // 验证码登录获取验证码
'/xxx', // 登录接口
'/xxx', // 获取配置
'/xxx', // 获取策略
'/xxx' // 刷新token
]
// 添加请求拦截器
instance.interceptors.request.use(
async config => {
if (config.loadingShow) {
showLoading()
}
if (getToken()) {
config.headers.Authorization = getToken()
config.headers['Tenant-ID'] = localStorage.getItem('tenantId')
config.headers['UserId'] = localStorage.getItem('uesrId')
// 排除双因子 验证码登录 ....
if (
no_need_to_refresh_token.every(item => config.url.indexOf(item) === -1)
) {
await store.dispatch('refreshToken')
}
}
return config
},
error => {
if (error.config.loadingShow) {
hideLoading()
}
// 对请求错误做些什么
return Promise.reject(error)
}
)
instance.interceptors.response.use(
async response => {
if (response.config.loadingShow) {
hideLoading()
}
// token失效
if (response.data.code === '401 UNAUTHORIZED') {
router.replace({
name: 'login',
params: {
clear: true
}
})
// 只弹一个【token过期提示】信息框的处理
let msgArr = document.querySelectorAll('.token401Message')
if (!msgArr.length) {
Message({
customClass: 'token401Message',
message: response.data.msg,
type: 'error',
onClose: () => {
msgArr = []
}
})
}
return Promise.reject(new Error(response.data.msg || '请求错误'))
}
// 接口报错
if (
response.data.code &&
(response.data.code !== 'SUCCESS' && response.data.code !== 'S1A00000') &&
response.data.code !== '401 UNAUTHORIZED'
) {
if (!response.request.responseURL.includes('account/verification')) {
Message({
message: response.data.msg,
type: 'error'
})
return Promise.reject(new Error(response.data.msg || '请求错误'))
}
}
return response
},
async error => {
if (error.config.loadingShow || error === undefined) {
hideLoading()
}
Message({
message: error,
type: 'error'
})
// 对响应错误做点什么
return Promise.reject(error)
}
)
const http = {
get: (path, data, config) =>
instance.get(path, {
params: data,
...config
}),
delete: (path, data, config) =>
instance.delete(path, {
data: data,
...config
}),
post: (path, data, config) => instance.post(path, data, config),
put: (path, data, config) => instance.put(path, data, config)
}
export default http