vue3动态修改axios默认值

总所周知,axios的默认值一般写在main.js文件下，但是每当获取的时候总是出问题

以下方法不可行

      console.log(this.$axios.headers.common['Authorization']);

于是只能在main.js入手

vue3有个全局注册变量的方法app.config.globalProperties也是createApp(App).config.globalProperties

错误方式

于是就有了以下代码

app.config.globalProperties.$Authorization = "No_JWT";
axios.defaults.headers.common['Authorization'] = $Authorization;

结果是不行，应该是获取不到，因为是页面的，加个变量就行了

const JWT = app.config.globalProperties.$Authorization = "No_JWT";
axios.defaults.headers.common['Authorization'] = JWT;
//提供方法修改
app.config.globalProperties.$Authorization = function(value) {
    app.config.globalProperties.$Authorization = value;
};

      //获取全局变量
      console.log(this.$Authorization)

以上只是一种假象，在vue3中刷新页面，变量数据就丢失了，哪有没有可以不丢失的方法呢？答案是肯定的

正确方法

main.js文件

if (localStorage.getItem("Authorization")==undefined) {
    console.log("Authorization被设置")
    localStorage.setItem("Authorization","No_JWT")
}

//怪不得丢失，原来这个也会跟着页面刷新
console.log("我是main.js调用"+localStorage.getItem("Authorization"))
axios.defaults.baseURL="http://127.0.0.1:8080"
axios.defaults.headers.common['Authorization'] = localStorage.getItem("Authorization");

注意，页面在刷新的时候main.js也会刷新,所以要做判断，这里是只是参考，实际根据开发来定

console.log("我是登录页面"+localStorage.getItem("Authorization"))//获取

更新

localStorage.setItem("Authorization", res.data.data)