Currently utilizing Firebase for authentication. Prior to making a request to the backend, I always ensure to request the idToken.
service.interceptors.request.use(async request => {
const token = await firebase.auth().currentUser.getIdToken();
if (!token && request.url !== '/signIn' && request.url !== '/register') {
toast.error('Not authenticated');
return;
}
request.headers.Authorization = 'Bearer ' + token;
return request;
});Furthermore, there is a backend request that will be triggered in the mounted hook of my Vue component.
mounted() {
plantService.getPlants().then(data => (this.suspicionList = data));
}While this process typically functions as intended, an issue arises when the page is refreshed and firebase.auth().currentUser becomes null, causing the request to fail and no data to be returned.
I've experimented with creating a computed property and observing it in a watcher, but to no avail. Moreover, in my main.js file, I have an observer for the user set up like so:
firebase.auth().onAuthStateChanged(user => {
store.dispatch('FETCH_USER', user);
});Any tips or insights on how to resolve this issue would be greatly appreciated!
Thank you!