前端axios拿不到401的解决办法

最新推荐文章于 2025-06-12 17:01:27 发布

JackieZhengChina

最新推荐文章于 2025-06-12 17:01:27 发布

阅读量2.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端

原文链接：https://blog.youkuaiyun.com/2203_75725182/article/details/130516884

在Vue3项目中，使用Axios时遇到401状态码无法在响应拦截器中捕获的问题。通过修改Axios源码，具体在node_modules/axios/lib/core/settle.js文件中添加401状态判断，使得拦截器能识别401并处理，如提示用户token过期，清除localStorage的token并重定向到登录页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios版本：1.3.6，框架：vue3，工具：elementplus

需求：

在vue3 main.js 中统一设置axios响应拦截器，当token过期（后端响应码status=401）

提示用户token过期
删除localStorage的token
跳转回登录页面

问题：

拦截器 axios.interceptors.response.use() 的两个参数，response=>{} 和 error=>{}，都无法访问到401状态码。

原因：axios过滤了401错误。

解决：修改axios源码。

文件位置：

node_modules/axios/lib/core/settle.js

找到：

if ( !response.status || !validateStatus || validateStatus(response.status) )

改为：

if ( !response.status || !validateStatus || validateStatus(response.status) || response.status===401 )

重新设置响应拦截器
在response.data.status中可以访问到401状态码

axios.interceptors.response.use (

response => {

if ( response.data.status===401 ) {

ElMassage.error ( '身份认证过期' )

localStorage.removeItem ( 'token' )

router.push ( '/login' )

}

return response

}

---------------------
作者：迦罗远洲
来源：优快云
原文：https://blog.youkuaiyun.com/2203_75725182/article/details/130516884
版权声明：本文为作者原创文章，转载请附上博文链接！
内容解析By：优快云,CNBLOG博客文章一键转载插件