Vuex ожидает обещание перед выполнением действий маршрутизатора

Question

Это мой первый проект, работающий с Vue и Vuex. Я настроил несколько маршрутов, для каждого из которых требуется аутентифицированный пользователь, за исключением маршрута входа. Все работает нормально, пока страница не обновится.

Это мой маршрутизатор:

router.beforeEach(async (to, from, next) => {
    const requiresAuth = to.matched.some(x => x.meta.requiresAuth)
    let user = await store.getters.loggedIn
    if (requiresAuth && !user) {
        console.log("Is user logged in?", user)
        next("/login")
    } else {
        console.log("Is user logged in?", user)
        next()
    }
})

Если пользователь посещает страницу в первый раз, он перенаправляется на страницу входа. После успешного входа пользователя в хранилище устанавливается значение loggedIn. Теперь пользователь может перемещаться по сайту без повторной аутентификации.

Магазин:

const store = new Vuex.Store({
    state: {
        loggedIn: false,
    },
    getters: {
        loggedIn(state) {
            return state.loggedIn
        }
    },
    mutations: {
        setLoggedIn(state, val) {
            state.loggedIn = val
        },
    },
    actions: {
        loggedIn({commit}, user) {
            if (user) {
                commit("setLoggedIn", true);
                console.log("USER FOUND: ", true)
            } else {
                commit("setLoggedIn", false);
                console.log("NO USER FOUND: ", false)
            }
        }
    }
})

Если пользователь обновляет страницу, журнал консоли маршрутизатора будет:

Is user logged in? false
STATE CHANGED
USER FOUND:  true

Это мой основной. js:

auth.onAuthStateChanged(user => {
  console.log("STATE CHANGED: ", user)
  store.dispatch("loggedIn", user);
});

new Vue({
  vuetify,
  router,
  store,
  render: h => h(App)
}).$mount("#app")

Я предполагаю, что onAuthStateChanged из основного. js не заставляет остальных ждать своего результата . Как мне решить эту проблему?

Answer 1

Вы должны хранить пользовательские данные также в LocalStorage браузера, а затем извлекать эти данные при обновлении страницы. Сначала используйте LocalStorage.setItem ('user', userData) для хранения данных пользователя, когда он / она вошел в систему. Затем в вашем состоянии:

const store = new Vuex.Store({
  state: {
    loggedIn: localStorage.getItem('user') ? true : false, // the key part
  }
})