After a successful sign-in through Firebase authentication, I need to update a navigation link.
The user login changes are managed within the created hook using .onAuthStateChanged()
data () {
return {
user: null,
additionaluserinfo: null,
isAdmin: false
}
},
created () {
firebase.auth().onAuthStateChanged((user) => {
if (user) {
this.user = user
// Fetching additional user information from Firebase
db.collection('users').where('user_id', '==', user.uid)
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
console.log(doc.data())
this.additionaluserinfo = doc.data()
this.$store.dispatch('setAdditionalUserInfo', doc.data())
})
})
.catch((error) => {
console.log('Error getting documents: ', error)
})
this.additionaluserinfo = this.$store.state.additionaluserinfo
// Checking user role for admin permissions
if (this.$store.state.additionaluserinfo.role === 'admin' || this.$store.state.additionaluserinfo.role === 'superadmin') {
this.isAdmin = true
}
// Checking user role for superadmin permissions
if (this.$store.state.additionaluserinfo.role === 'superadmin') {
this.isSuperAdmin = true
}
} else {
this.user = null
this.additionalUserInfo = null
}
})
I verify user rights in onAuthSateChanged.
The challenge lies in having to refresh the page for the navigation bar (v-if="isAdmin" / "isSuperAdmin") to reflect the updates. Is there a way to force an update within onAuthStateChanged?