Question

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

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

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

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

Answer 1

在这里您可以阅读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');
    }
  }
}

此防护措施将防止输入/proctected网址。在这里，您可以检查有效的Codepen：https://codepen.io/anon/pen/JwxoMe

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

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

1 个答案: