在 Nuxt JS 中创建 Vue 应用程序之前检查 Firebase onAuthStateChanged答案

【问题标题】：Check Firebase onAuthStateChanged before Vue app created in Nuxt JS在 Nuxt JS 中创建 Vue 应用程序之前检查 Firebase onAuthStateChanged
【发布时间】：2020-02-07 00:00:47
【问题描述】：

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

让我解释一下

在 Vue 2 中，我所做的通常是在 main.js 文件中

import Vue from 'vue' 
import App from './App.vue'
import { auth } from '@/firebase/init'

let app = null

// ⚡ Wait for firebase auth to init before creating the Vue app
auth.onAuthStateChanged(() => {
  // init app if not already created
  if (!app) {
    app = new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
  }
})

但在 Nuxt JS 中，整个 main.js 文件都被封装了。现在我知道我可以使用插件来执行Vue.use() 之类的操作，但这些事情在创建 Vue 应用程序之后再次发生。

我想将 vue 应用程序的创建包含在 firebase 身份验证检查中，所以我看不出有什么方法可以实现这一点。所以，如果有人知道如何实现这一点，请告诉我。

请注意，我不会尝试根据身份验证状态进行任何重定向。我知道这些答案已经存在，并且我已经检查过了。

【问题讨论】：

标签： javascript firebase firebase-authentication nuxt.js

【解决方案1】：

我想我有一个类似的问题，我设法创建了一个登录流程，但感觉像是一种解决方法。

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

通过 firenbase 登录后，我通过 onAuthStateChanged 挂钩将来自 authUser 的用户数据保存在 vuex 存储中，该挂钩位于仅客户端插件中。
将 firebase 令牌存储为 cookie

在页面重新加载：

使用 nuxtServerInit 将来自 cookie 的数据初始化存储在服务器端： https://github.com/davidroyer/nuxt-ssr-firebase-auth.v2/blob/master/store/index.js
onAuthStateChanged 被触发并且什么都不做，因为 userStore 已经初始化了

在重定向到应用程序时：

例如，如果用户从支付服务提供商返回到我的应用程序，则 vuex 存储是空的，直到 firebaseAuth 插件加载并将用户数据保存在 vuex 存储中。我这里使用localStorage来持久化公共用户，所以app认为我们还在登录。https://www.npmjs.com/package/nuxt-vuex-localstorage
在后台触发 onAuthStateChanged。这感觉不对。

特别是在“重定向到应用程序”的情况下，如果首先处理 onAuthStateChanged 会很好，因为这样我们就可以跳过 localStorage 并使用例如来自 firestore 的访问 userData 而不必等待 authPlugin 出现。

也许一个解决方案是编写一个模块，它提供了更多可以使用的钩子： https://nuxtjs.org/guide/modules/#run-tasks-on-specific-hooks

【讨论】：

【解决方案2】：

我遇到了同样的问题，并找到了一个更简单的解决方案。但是，我不明白为什么在 firebase nuxt 的任何地方都没有记录这一点......

在layouts/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>

我认为这与在 vueJS 的 main.js 中使用它完全一样。通过使用v-if，主应用程序内容应仅在初始化 firebase 身份验证后执行。

【讨论】：