这一节课，我们通过把loken存放在localStorage来实现持久化的存储，这里面有一个场景，用户在登录之后，如果刷新了页面，这时token还存在localStorage，可是用户的基本信息(如用户名)却丢失了，所以我们在App.vue里获取用户信息。此时会进行一次axios的header的设置的操作
代码如下图(App.vue)

而我们在login的时候，在store.ts里面同样对axios的header进行了设置
代码如下(store.ts)

这样有个问题，就是我们在不同的地方设置axios的header，过一段时间之后我们可能会疑惑，我为什么要在这个地方设置header啊？又得重新捋一遍逻辑。
所以，我想的时能不能把设置header的这段逻辑统一写在axios的配置部分，和defaultURL以及interceptor一样，其他地方就不用管header的事啦
代码如下

这样又带来了新的问题，
登录之后(并没有刷新页面，直接跳到主页)，上面的代码不会再运行，此时不会设置header
只要不刷新页面，这个axios文件就不会重新加载，这个header就不会更新

那么，我的问题是，这vue3不是有ref和reactive嘛，我们能不能检测到token的改变，自动去设置新的header呢？
伪代码：

	const token = ref(localStorage.getItem("token"))
	watchEffect(token,(newVal)=>{
		axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
	})

这当然只是伪代码( 我们每次都是直接localStorage.setItem( “token”, newVal ), 上面的代码应该无法检测到token的改变 )，想问下应该正确实现token改变，自动更新header的需求呢？