记录一次Vue+axios登录拦截器的问题,最近在写Vue的登录拦截器,出现一些问题,在error中使用iview的Message消息提醒时一直出现问题,但是没有报错信息,(没有报错信息最致命的问题),后来try cache后发现是this的问题。
使用了N中方法解决this的指向问题,一直没有解决,后来想到使用js的原型链的方式,没想到解决了
axios.interceptors.response.use(
response => {
return Promise.resolve(response)
},
error => {
if (error.response) {
try {
switch (error.response.status) {
case 401:
Vue.prototype.$Message.warning(
{
content: error.response.data.msg,
duration: 5
}
)
router.replace({
path: '/',
query: {redirect: router.currentRoute.fullPath} // 登录成功后跳入浏览的当前页面
})
break
case 403:
Vue.prototype.$Message.warning({
content: error.response.data.msg,
duration: 5
})
router.replace({
path: '/',
query: {redirect: router.currentRoute.fullPath} // 登录成功后跳入浏览的当前页面
})
break
case 500:
Vue.prototype.$Message.error({
content: '服务器出现问题',
duration: 5
})
break
case 404:
// 跳转到404页面
router.replace({
path: '/'
})
}
} catch (e) {
console.log(Vue.prototype.$Message)
}
}
return Promise.reject(error.response.data)
}
)