[Vuejs]-Page with the authRequired meta still gets shown for a split second even when no one is logged in on Firebase

by

0👍

✅

The problem is that instead of checking for a logged-in user you are adding an "event listener" auth.onAuthStateChanged.. it fires async when the authentication state changes. However you need a sync check here. The best would be to use vuex and store your user in a global state. Though if you don’t use vuex at all and you need your user only here, then probably a "local" user var in the router would also work.. something like this:

let user = null
auth.onAuthStateChanged(u => {
   console.log(u)
   if (u) {
     user = u
   } else {
     user = null
   }
})

router.beforeEach(to => {
  if (to.matched.some(rec => rec.meta.requiresAuth)) {
    //Check firebase user
    if (!user) {
      router.push("/login");
    }
  }
})

It’s just a concept, but it should work.. let me know 🙂

Leave a comment