时间戳

首页 > 解决方案 > Vuex 在执行路由器操作之前等待承诺

vue.js - Vuex 在执行路由器操作之前等待承诺

问题描述

这是我第一个使用 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

这是我的 main.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来自 main.js 并不会强迫其余部分等待其结果。我应该如何处理这个问题？

标签： vue.jsvuex

解决方案

您还必须将用户数据存储在浏览器 LocalStorage 中，然后在页面刷新时检索该数据。首先使用 LocalStorage.setItem('user', userData) 在他/她登录时存储用户数据。然后在你的状态：

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

推荐阅读