Auth token not reloaded - vue.js

Question

I have a problem with an authToken in my Vue 3 application (very beginner in JS and Vue).
When the user is authenticated (after a post /login), the app receives a token which is stored in the local storage (I know it is perhaps not a good idea, it will be another question later).
With this token, the app can make some GETs to the endpoint. All is working fine.
Of course, the user can logout. In this case I remove the token from the local storage and the user is redirected to the login page.
The problem is now : when the user reconnects again, a new token is received and stored. But all the GET requests are made with the previous token. So of course all the requests are refused (the previous token is no more on the server).
When the app receives the token :
export function loginUser(email, password) {
return new Promise(async (resolve, reject) => {
try {
let res = await axios({
url: `${REST_ENDPOINT}/login`,
method: 'POST',
data: {
email: email,
password: password
}
})
setAuthToken(res.data)
resolve()
}
catch (err) {
console.error('Caught an error during login:', err.request.response)
reject(JSON.parse(err.request.response))
}
})
}
export function logoutUser() {
clearAuthToken()
}
export function setAuthToken(token) {
axios.defaults.headers.common['Authorization'] = `Bearer ${token.token}`
console.log('je suis dans le setAUthToken')
localStorage.setItem(AUTH_TOKEN_KEY, token.token)
}
And for the requests, I created a repository system. So in my component I just have :
import { RepositoryFactory } from "../../repositories/RepositoryFactory";
const OrganizationsRepository = RepositoryFactory.get("organizations");
export default {
name: "About",
data() {
return {
isLoading: false,
organizations: [],
page: 1,
filterByName: '',
filterByStateId: 'VALIDATED',
};
},
created() {
this.page = 1
this.getOrganizations();
},
methods: {
async getOrganizations() {
this.isLoading = true;
console.log('avant le get dans la view')
const { data } = await OrganizationsRepository.getOrganizations(this.buildParams());
this.isLoading = false;
this.organizations = data;
},
I am sure (but to confirm) that it is normal because when the app is loading, the token is stored and no more changed (thanks to the import just below).
So in this case, how to force the component to reload the token for each request ?