时间戳

首页 > 解决方案 > 如何使中间件在页面加载之前完成对服务器的异步请求并提交到 Vuex 存储？

javascript - 如何使中间件在页面加载之前完成对服务器的异步请求并提交到 Vuex 存储？

问题描述

我的中间件使用firebase.auth().onAuthStateChanged用户对象并将其存储在 Vuex 存储中以防万一。代码工作正常，但页面在 Vuex 存储中的用户对象设置之前加载。我的另一个中间件通过检查用户对象是否存在来保护某些页面。因此，如果我加载http://localhost:3000/protected，我将被拒绝访问，但如果我首先加载另一个页面并继续http://localhost:3000/protected通过 a<nuxt-link>我可以访问该页面。

如何让 nuxt 在加载页面之前等待中间件 setUser？

export default async function (context, callback) {
    auth.onAuthStateChanged(user => {
        if (user) {
            context.store.commit("setUser", user)
            callback()
        } else {
            callback()
        }
    })
}

更新：插件方法产生相同的结果

标签： javascriptasynchronousvue.jsvuexnuxt.js

解决方案

在这里您可以阅读 Vue 中的身份验证示例：https ://scotch.io/tutorials/vue-authentication-and-route-handling-using-vue-router

基本上，您可以在让用户打开受保护的组件之前检查身份验证。实现这一点的最简单方法是使用路由器防护。在您的路由器定义中：

{
  path: '/proctected',
  beforeEnter(to, from, next) {
    if (isAuthenticated()) {
      next();
    } else {
      next('/page-to-show-for-unauthenticated-users');
    }
  }
}

这个守卫将防止输入 /proctectedurl。在这里您可以检查工作中的 codepen：https ://codepen.io/anon/pen/JwxoMe

有关路由器保护的更多信息：https ://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard

推荐阅读