axios拦截token过期会出现 N次效果 (N=页面上的请求个数)

Question

问题描述

每次拦截的时候都会执行N次的拦截操作,也就是页面上有几次请求,这个拦截操作就会被执行N次.想了很多办法都没有解决.

问题出现的环境背景及自己尝试过哪些方法

vue+antd后管项目,使用了axios每次传入token进行各种前后台交互操作.

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
// 响应拦截器
axios.interceptors.response.use(
res => {

// Do something before request is sent
// 判断状态码等于超时
if (res.data.ErrorCode === 'E_LogOutTime') {
  // message.info(res.data.Errors + ',请重新登录', 3)
  // 清楚token
  localStorage.removeItem('token')
  // 跳转登陆页
  router.push('/login')
  message.info(res.data.Errors + ',请重新登录', 3)
}
return res.data

},
error => {

// Do something with request error
return Promise.reject(error)

}

你期待的结果是什么？实际看到的错误信息又是什么？

期待只会执行一次

Answer 1

依此拙见看是否可行：

axios.interceptors.response.use(
    res => {
        // 判断状态码等于超时
        if(res.data.ErrorCode === 'E_LogOutTime') {
            if(localStorage.getItem('token')) {
                message.info(res.data.Errors + ',请重新登录', 3);
            }
            // 清除token
            localStorage.removeItem('token');
            // 跳转登陆页
            router.push('/login');
        }
        return res.data
    },
    error => {
        return Promise.reject(error)
});

Answer 2

执行多次的逻辑是对的啊，你也不能确保你每次请求的时候 token 都没过期吧

Answer 3

message.info 前先判断 提示框存不存在,不存在再提示.或者 保存 message 实例,弹出提示框前,先取消显示一次弹框(也就是先主动调用一次 close).