项目使用 axios 拦截器进行接口响应判断处理,通过判断返回的 code 验证用户 token 是否过期,或者 token 无效, 使用 Element MessageBox 弹框提示。
又因为项目中有个地方需要定时请求服务,获取对应的数据,结果导致在用户在其他设备上登录后(Token无效了),出现定时请求每一次请求拦截器都创建一个 MessageBox 的情况。
通过一个变量来标记 MessageBox 状态,如果点击 关闭
, 去登录
,取消
按钮操作,标记此 MessageBox 已经关闭,否则不创建 MessageBox 询问框。
...
let messageBoxFlag = 0 // 默认 MessageBox 未打开
// axios 响应拦截
service.interceptors.response.use(
async response => {
const res = response.data
// 208:未登录,Token过期,Token无效,需要登录
if (res.code === 208) {
if (messageBoxFlag === 0) {
messageBoxFlag = 1 // 修改标记,打开 MessageBox
MessageBox.confirm('系统检测到您的账号长时间未操作或账号在其他设备登录, 是否重新登录?', '警告', {
confirmButtonText: '去登录',
cancelButtonText: '取消',
type: 'error'
}).then(() => {
messageBoxFlag = 0 // 修改标记
window.location = window.location.origin
}).catch(() => {
messageBoxFlag = 0 // 修改标记
})
}
} else {
return res
}
},
error => {
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
...
Element Message 消息框内置了 close 函数,因此这里不能通过调用 close 的方式解决问题。
https://element.eleme.cn/#/zh-CN/component/message-box
https://element.eleme.cn/#/zh-CN/component/message