最近是在网上找了个开源项目准备二次开发,在跑后台项目时遇到个大坑,由于以前没遇到过,花了不少时间,今天被同事解决了,记录一下。
问题描述:
axios配置请求拦截器响应拦截器(为了对请求统一设置token,获取token,状态码判断),
代码如下:
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api 的 base_url
timeout: 10000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
/**
* code为非20000是抛错 可结合自己业务进行修改
*/
const res = response.data
if (res.code !== 200) {
Message({
message: res.msg,
type: 'error',
duration: 5 * 1000
})
// 302:非法的token; 301:Token 过期了; 305 菜单过期;
if (res.code === 302 || res.code === 301 || res.code === 305) {
MessageBox.confirm(
'你已被登出,可以取消继续留在该页面,或者重新登录',
'确定登出',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
})
}
// return res
return Promise.reject('error')
} else {
return response.data
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
当时是遇到问题发现这个request拦截器可以生效,但是response拦截器不能生效。或者说注释掉request拦截器后,response拦截器才会生效(在代码中debug不进断点),从页面调试发现axios对象是成功设置了两个拦截器。一切都是那么的无可挑剔。但是就是不能正常跑起来。
解决方式:
超级简单,在项目目录下执行,然后重启项目,项目执行正常了就。
npm update
可以看到问题是 axios版本问题。
0.21.2这个版本属于是有bug了,搞不懂为啥这么坑。
写这个帖子的目的是当时网上查资料没有搜到有相关的帖子,所以我发一个救救遇到类似问题的孩子们,当你觉得一切的都很完美的时候,不防考虑下三方包版本问题、构建工具问题等等。