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

这是我的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")

我的猜测是，main.js中的onAuthStateChanged不会迫使其余部分等待其结果。我应该如何处理这个问题？

Answer 1

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

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

Vuex在执行路由器操作之前等待诺言

1 个答案: