I am currently experiencing an issue with axios login in Vue 3.
Upon successfully logging in and authenticating through the API, I use router.push to redirect the user to the dashboard. Here is the code snippet:
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 successful")
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);
})
The redirection to the dashboard works properly, but the axios header does not function until the page is manually refreshed by pressing F5.
Despite adding the following line in main.js:
axios.defaults.headers['x-access-token'] = localStorage.getItem('accessToken')
How can this issue be resolved? Thank you for your help.