元素
元素
工具
博客
问答

Axios拦截器里如何统一处理401错误但页面没跳转？

UE丶卫利 阅读 24
前端

在项目里给Axios加了响应拦截器处理401，发现虽然能捕获到状态码，但跳转登录页的逻辑完全没执行。之前试过用window.location.replace(‘/login’)，但页面还是卡在当前页没反应。

代码大概是这样写的：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      console.log('检测到401'); // 这个确实会打印
      window.location.replace('/login'); // 这行好像没执行？
      return Promise.reject(error);
    }
    return Promise.reject(error);
  }
);

控制台没报错，但页面就是不跳转，登录页路由明明存在。后来改用router.push(‘/login’)也不行，难道拦截器里不能直接操作路由？

我来解答 赞 7 收藏
二维码
手机扫码查看
反馈
1 条解答
Newb.天朝
Newb.天朝 Lv1
你这个问题挺典型的，拦截器里处理401确实容易踩坑。问题出在 Promise.reject 上，它会导致后续的逻辑被中断，页面跳转可能没执行完就被吞掉了。

我的建议是用一个标志位缓存起来，确保跳转逻辑只执行一次，然后直接在拦截器里同步完成跳转，别让错误链继续往下传。下面是优化后的代码：

let isRefreshing = false; // 防止多次刷新



axios.interceptors.response.use(

  response => response,

  error => {

    if (error.response && error.response.status === 401) {

      console.log('检测到401');

      

      if (!isRefreshing) { // 确保只跳转一次

        isRefreshing = true;

        window.location.href = '/login'; // 用href代替replace，更可靠

        return new Promise(() => {}); // 返回空Promise阻断链式调用

      }

    }



    return Promise.reject(error);

  }

);



重点来了：

1. 加个标志位 isRefreshing 防止重复跳转。

2. 用 window.location.href 替代 replace，后者有时候会被浏览器缓存干扰。

3. 返回一个空的 Promise，避免错误链继续传播影响跳转。



试试这个方案，性能上也更稳定，不会再卡住。如果还是有问题，可能是路由配置那边有坑，再看看登录页路径对不对。
点赞 7
2026-01-30 19:03
相关推荐
元素
元素
工具
博客
问答
登录/注册