When I log in using my Login component, a request is made to retrieve a JWT token which is then saved into localStorage before navigating to the Home page.
const response = await axios.post('/auth/login', {
login: this.login,
password: this.password
});
localStorage.setItem('token', response.data);
this.$router.push('/');
In axios.js, I configure the header with the retrieved token:
axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
Upon landing on the Home page after redirection, the "mounted" hook attempts to make a request using the stored token but encounters an error 401 due to the Authorization header being set as "Bearer null". However, upon refreshing the page, everything works fine. Why does it show up as null after redirection?
async mounted() {
const response = await axios.get('cinema/items');
this.cinemas = response.data;
}