Encountering an issue with Vuex and Firebase Authentication integration. When reloading the page, there is a delay in response from firebase.auth().onAuthStateChanged. I require an immediate response upon page reload without using router guards as seen in most tutorials online. Some routes only allow access to logged-in users.
Implementing this in App.vue:
created () {
firebase.auth().onAuthStateChanged(async user =>{
if (user){
await this.$store.dispatch('autoSignIn',user)
}
})
}
The vuex action triggered for auto sign-in upon page reload:
autoSignIn ({commit}, payload) {
commit('setUser',{email:payload.email, userId:payload.uid})
}
Getter used:
isAuthenticated:state => {
return state.user !== null && state.user !== undefined ? state.user : null
}
Implementation of isAuthenticated getter:
getEventsByUser({getters,commit}){
let data = [];
firebase.database().ref('usuario/' + getters.isAuthenticated.userId + '/eventos/')
.on("value", eventos =>{
eventos.forEach(evento =>{
data.push({"id": evento.key, ...evento.val()})
});
commit('setEventsByUser',data)
})
},
The component dispatching the action:
<template>
<div>
<div v-for="(event,id) in getEventsByUser" :key="id">
{{event}}
</div>
</div>
</template>
<script>
export default {
name: "MyEvents",
computed:{
getEventsByUser(){
return this.$store.getters.getEventsByUser;
},
},
mounted() {
this.$store.dispatch('getEventsByUser')
},
}
Error encountered upon reloading the page: https://i.stack.imgur.com/lU2hx.png