Vue axios拦截器相同请求二次请求失败

        最近，使用jwt来进行前后端身份认证。前端就使用到了axios的拦截器对所有请求进行拦截并为其请求头添加上Authorization属性，值为jwt。

        但是出现了个很奇怪的现象，相同的请求第一次正常，刷新网页进行第二次请求就会报403错误，看了一下请求头，Authorization没有被加上去，看了一下后端的输出jwt也是null的。

        后面搜了一下，看很多文都是说因为请求数据被缓存，相同请求第二次直接用缓存了就没走拦截器也就没添加上jwt。他们的解决方法也都是一致的，启动axios的禁用缓存配置，还有就是往请求头里面加时间戳，这样系统就不会判断两次请求是一样的，也就不会走缓存。

// 禁用缓存
axios.defaults.headers.common['Cache-Control'] = 'no-cache' 

        But！！！

        都试了没用，后面才反应过来，我这个和他们不是一个错，前面说到我后端输出了jwt为null的信息，说明第二个请求是有发出去的，并不是直接拿的缓存数据。

        后面继续查资料，发现我请求拦截器是写到main.js里面的，这样是不行的，重新创一个xxx.js文件放进去然后在main.js里面import store from './xxx'引进来就解决了！！！

// 请求拦截器, 每次请求都会在请求头中携带token
axios.interceptors.request.use((config) => {
  if(localStorage.getItem('Authorization')) {
    config.headers.Authorization = localStorage.getItem('Authorization')
  }
  return config;
}, (error) => {
  return Promise.reject(error);
})

        查了下资料，这是因为在JavaScript中，每个文件都有自己的作用域。当将axios拦截器定义在main.js文件中时，它只会在应用程序启动时执行一次，并且只会对在该文件中发送的请求起作用。如果在其他文件中发送请求，则不会使用该拦截器。

        解决方法是将axios拦截器定义在单独的文件中，然后在main.js中引入该文件。这样，拦截器将被定义为全局拦截器，并可以在整个应用程序中使用。