这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战
前言
在平时的工作学习中，我们会经常遇到axios中配置响应拦截器相关的问题，前端基本上都是来根据token值是否合法来校验登录态的，在token值非法的时候，直接拦截到登录页面，一般来说，这里会使用路由守卫和拦截器结合的方法来解决问题。
今天我们来侧重谈一下在main.js的axios中配置响应拦截器，当token值不合法直接跳转到登录页的问题。
代码如下：
// 给axios配置响应拦截器
...
axios.interceptors.response.use(
function(response) {
// 当返回状态码表示token值无效时
if (response.data.code === 4002) {
Vue.prototype.$message.error('登录已过期，请重新登录')
router.replace('/login')
} else {
// 其他情况
return response.data
}
},
function(error) {
// 对响应错误做点什么
return Promise.reject(error)
}
)
...
值得注意的是在vue的main.js中并不能够直接使用this.$routers来获取路由，因为此时this还未指向我们的vue实例，处于挂载阶段，网上也有很多例子，大多实验无果。
此时的this我打印出来是undefined，所以this.$message和this.$router都不能用。
关于登录失效的提示，可以使用Vue.prototype.$message， 跳转的话，可以使用router.replace('/login')
值得注意的是，如果你在请求失败的代码中写了this.$message.error('错误信息')，那么 return response.data也会返回一个打印的错误，此时不会显示Vue.prototype.$message.error('登录已过期，请重新登录')，优先显示请求失败的代码中写了this.$message.error('错误信息')。
所以要写if else判断，当后端返回状态码是4002（tooken有误）时，不返回后端响应的数据，只触发 Vue.prototype.$message.error('登录已过期，请重新登录')和router.replace('/login')即可。
而其他情况的时候，基本不是token登录态的问题，此时直接返回后端相应的数据即可。
后记
你好哇，我是南极大冰块，一个技术与颜值成正比的前端工程师，崇尚一针见血的搞定前端问题，希望我的博客有帮助到了你。关注我，前端路途一起走。嘿哈~😛
