Vue 刷新页面后 axios请求拦截器不起作用的解决办法

Vue 刷新页面后 axios请求拦截器不起作用的解决办法

---

起因：

使用Vue axios作为网络请求的工具，在网页第一次打开时可以进行axios请求，并在config headers中添加token 作为请求令牌。但是，在手动刷新页面之后，网页数据出现无法请求的情况。后台返回:bad token format 

后端返回结果如图： 发现headers 中未添加请求头

分析：

我在main.js中对axios拦截器进行了配置，对请求时进行了判断，如果token存在，应当向headers中添加token。

然而，在发生如上情况后，我发现自己写的拦截器在页面刷新后根本没有被调用。查询若干资料，最后找到解决的办法：将axios在另一个js 脚本中进行配置，在main.js 中进行引用。最后成功解决问题，在页面刷新后，我的拦截器仍然在作用！

代码：

1. 新建js 文件，命名为http.js，在这个文件中进行axios配置

   import axios from 'axios';
   
   
   // 创建axios实例
   var instance = axios.create({timeout: 1000 * 12});
   instance.interceptors.request.use(
     config => {
       console.log('发送请求')
       // console.log(localStorage.getItem('token'))
       if (localStorage.getItem('token')) {
         // console.log('请求头加入token')
         config.headers.token = localStorage.getItem('token')
       }
   
       return config
   
     },
   
     error => {
       console.log('请求失败！！')
       console.log(error)
       return Promise.reject(error)
   
     })
   
   //异步请求后，判断token是否过期
   instance.interceptors.response.use(
     response => {
       return response;
     },
     error => {
       if (error.response) {
         switch (error.response.status) {
           case 401:
             localStorage.removeItem('token');
             this.$router.push('/');
         }
       }
     }
   )
   export default instance;
   

2. 回到main.js 

 

引入我们配置的axios 实例

import instance from './http'

Vue.prototype.$axios = instance

之后就可以使用this.$axios 进行网络请求了，也不会出现上述原因引起的拦截器不起作用的情况。