firebase auth with vue router

Question

I have the authorization check code and it works. Now I need to implement path protection for an unauthorized user.

The problem is that the function in the storage does not have time to work out as it is already necessary to go along the path. AuthState and LoginStatus

try do it from getters, get actual state and try get data from state, but nothing happened

When I reload the page or clear the cache everything resets

//STORE
// call it first from app in created()
  state: () => ({
    isAuthReady: null,
  
  }),
    async AuthState({ dispatch }) {
      await auth.onAuthStateChanged((userFirebase) => {
        dispatch("LoginStatus", userFirebase);
      });
    },
    LoginStatus({ commit, dispatch }, user) {
      //console.log(user)
      if (user) {
        commit("setAuthReady", true);
        commit("setUser", user);
        dispatch("UserProfile", user);
        dispatch("isAdmin");
      } else {
        // User is signed out
        // ...
      }
    },
 //ROUTER
 {
    path: "/admin",
    component: () => import("@/pages/adminPage/admin"),
    meta: { requiresAuth: true },
  }
 router.beforeEach(async (to, from, next) => {
 
  if (to.meta.requiresAuth) {
    if (store.state.user.userInfo.length || store.state.user.userInfo.id) {
      next();
    } else {
      
      await store.dispatch("auth/openLoginForm");
      next("/");
    }
   
  } else next();
});

Answer 1

I don’t know if I did it right, but as recommended in this Answer, I think this is possible in firebase.

router.beforeEach((to, from, next) => {
  auth.onAuthStateChanged(async (userFirebase) => {
    if (to.meta.requiresAuth) {
      if (userFirebase) {
        next();
      } else {
        await store.dispatch("auth/openLoginForm");
        next("/");
      }
    } else next();
  });
});