vue项目中axios如何捕捉http状态码为401错误问题
作者：weixin_49696014
这篇文章主要介绍了vue项目中axios如何捕捉http状态码为401错误问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue axios捕捉http状态码为401错误
项目开发中，需要判断一下token是否有效，如果是一个无效的token，那么后台后返给我http状态码为401的错误，注意这里是http状态码，也就说只有是2xx系列的才算是请求成功，所以返回的401，此时浏览器肯定时报错的，如果你正常的逻辑去拿包，肯定是拿不到的。
这种情况下，就要用到axios的响应拦截了
在main入口文件下写
// 响应拦截
axios.interceptors.response.use(function (response) {
// 这个是处理响应成功的结果，也就是说响应状态码为2XX系列的
NProgress.done() // 这个忽略，只是一个响应的进度条
return response;
},function (error) {
// 这个是处理响应失败的，也就是响应错误的，在这个箭头函数中，才能拿到401状态下的包
NProgress.done()
if (error.response.status === 401) {
// 接口的根地址截取下来，判断
const url = error.response.config.url
const flag = url.substring(0,url.indexOf('/'))
// 判断地址是哪一个页面的，push到相应的错误页面
if(flag == 'roster'){
router.push({
path:'/rosterError',
query:{
info: error.response.data.message
}
})
}
if(flag == 'user'){
router.push({
path:'/AllUserinfoEerror',
query:{
info: error.response.data.message
}
})
}
}
return Promise.reject(error);
});
vue全局响应拦截器401报错
在处理全局响应拦截器的时候，处理401，错误，尝试了各种方法，但是都没有效果。
最终，各种方式试过了，修改axios的版本，解决了问题。
axios": "0.18.1"
人麻了！！！！！
// 添加响应拦截器
instance.interceptors.response.use((response) => {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么 (默认axios会多包装一层data，需要响应拦截器中处理一下)
const res = response.data
return res
}, (error) => {
// 超出 2xx 范围的状态码都会触发该函数。
if (error.response.status === 401) {
console.log('登录状态无效，请重新登录')
return Promise.reject(error)
}
Message.error(error.message)
return Promise.reject(error)
})
``总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。