Axios Header在登录Vue 3后全局不工作

Question

我用Vue 3登录axios有问题。

访问API登录和认证成功后，我放路由器。Push将页面重定向到仪表板，代码如下:

axios.post('auth/signin', {
username: username,
password: password
}).then((response) => {
localStorage.setItem('accessToken', response.data.accessToken)
localStorage.setItem('refreshToken', response.data.refreshToken)
toast.success("Login sukses")
if(VueJwtDecode.decode(localStorage.getItem('accessToken')).sub == "admin"){
router.push({name: 'admin.dashboard.index'})
}else if(VueJwtDecode.decode(localStorage.getItem('accessToken')).sub == "user"){
router.push({name: 'user.dashboard.index'})
}else if(VueJwtDecode.decode(localStorage.getItem('accessToken')).sub == "company"){
router.push({name: 'company.dashboard.index'})
}
}).catch(error => {
toast.error(error.response.data.error.message);
})

它成功地将用户重定向到仪表板，但是axios头不工作，我必须刷新(f5)浏览器页面才能使axios头启动功能。

尽管我已经添加了

axios.defaults.headers['x-access-token'] = localStorage.getItem('accessToken')

line in main.js

如何解决这个问题?谢谢。

Answer 1

main.js只会在第一次启动时编译，所以当新的访问令牌到达时，您应该编辑您的axios头