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();
});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();
});
});