Javascript 在Nuxt JS中创建Vue应用之前检查Firebase onAuthStateChanged

我已经使用Vue JS v2有一段时间了，我对它很满意。最近，我开始使用Nuxt JS，到目前为止，我能够掌握大部分内容。但在花了无数个小时搜索web之后，我仍然无法在Nuxt JS中创建Vue应用程序之前找到如何使用firebase

onAuthStateChanged（）

让我解释一下 在VUE2中，我通常在

main.js

文件中执行操作

从“Vue”导入Vue
从“./App.vue”导入应用程序
从'@/firebase/init'导入{auth}
让app=null
// ⚡ 在创建Vue应用程序之前，等待firebase auth初始化
身份验证onAuthStateChanged（（）=>{
//初始化应用程序（如果尚未创建）
如果（！应用程序）{
app=新Vue({
路由器，
商店，
渲染：h=>h（应用程序）
}).$mount（“#应用程序”）
}
})

但是在Nuxt JS中，整个main.JS文件被封装。现在我知道我可以使用plugin来做一些事情，比如

Vue.use（）

，但是这些事情还是在创建Vue应用程序之后发生的

我想将vue应用程序创建包装在firebase身份验证检查中，因此我认为没有办法实现这一点。所以，如果有人对如何实现这一点有任何想法，请让我知道

---

请注意我没有尝试根据身份验证状态进行任何重定向。我知道这里已经有了这些答案，我已经检查过了。

我想我也遇到了类似的问题，我设法创建了一个登录流，但这感觉像是一个解决办法

登录时，我存储cookie和用户数据：

在通过firenbase登录后，我通过onAuthStateChanged钩子将authUser的用户数据保存到vuex存储中，该钩子位于仅客户端插件中

将firebase令牌存储为cookie

在第页重新加载：

在服务器端使用cookie中的数据初始化存储，使用nuxtServerInit：

onAuthStateChanged被触发，但不执行任何操作，因为userStore已初始化

在重定向到应用程序时：

例如，如果用户从支付服务提供商处返回到我的应用程序，则在firebaseAuth插件加载并将用户数据保存到vuex应用商店之前，vuex应用商店是空的。我使用localStorage将公共用户持久保存在这里，因此应用程序认为我们仍在登录

在后台，将触发onAuthStateChanged。这感觉不对

特别是在“on redirect into app”的情况下，如果先处理onAuthStateChanged，那就更好了，因为这样我们就可以跳过localStorage，使用firestore中的access用户数据，而不必等待authPlugin出现

也许一个解决方案是编写一个模块，它提供了更多您可以使用的挂钩：

---

我也遇到了同样的问题，找到了一个更简单的解决办法。但是，我不知道为什么firebase nuxt中没有记录这一点

在

布局/default.vue

布局中，我实现了以下功能：

<template>
  <div>
    <div v-show="!isLoaded" class="loading">
    </div>
    <div class="app" id="app" v-if="loaded">
      <NavBar :loggedIn="loggedIn" />
      <Nuxt id="router-view" />
      <Footer />
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loggedIn: false,
        loaded: false
      }
    },
    created() {
      this.$fire.auth.onAuthStateChanged(() => {
        this.loaded = true
        const user = this.$fire.auth.currentUser;
        if (user) {
          this.loggedIn = true
        }
      })
    },
    ...
  }
</script>

导出默认值{
数据（）{
返回{
洛格丁：错，
加载：false
}
},
创建（）{
此.fire.auth.onAuthStateChanged（（）=>{
this.loaded=true
const user=this.$fire.auth.currentUser；
如果（用户）{
this.loggedIn=true
}
})
},
...
}

我认为这与在vueJS的main.js中使用它完全一样。通过使用

v-if

仅在初始化firebase auth后执行主应用程序内容