统一封装token过期提示(防抖、节流)
场景是token有过期时间,token过期后操作需要弹窗提示token过期,然后返回登录页。
方案:
token过期会返回特定code,接口请求统一拦截,如下代码是弹窗框逻辑。
function loginTimeOutMessageBox() { MessageBox({ title: i18n.t('I18N_COMMON_LOGIN_AGAIN'), message: i18n.t('I18N_COMMON_SESSIONTIMEOUT'), showClose: false, closeOnClickModal: false }).then(() => { setTimeout(() => { router.push('/login') }, 500) }) }
请求拦截,注:加黑部分,是为了防重复,比如token已过期,刷新页面同时有多个请求,正常会触发多次弹窗,这个tooManyRequest参考防抖、节流(一段时间内的多次请求只触发一次)
const instance = axios.create({ timeout: 120000 }) instance.interceptors.response.use( response => { const res = response.data if (res.result_code !== '1') { if (res.result_code === '21' && store.getters.token) { // token过期 tooManyRequest().then(() => { loginTimeOutMessageBox() }) } else { return Promise.reject(res) } } else { return response.data } }, error => { } )
function tooManyRequest() { return new Promise((resolve) => { window.clearTimeout(requestTime) requestTime = null requestTime = setTimeout(() => { resolve() }, 1000) }) }