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

Question

我已经使用 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 身份验证检查中，所以我看不出有什么方法可以实现这一点。因此，如果有人对如何实现这一点有任何想法，请告诉我。

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

Answer 1

我也遇到了同样的问题，并找到了更简单的解决方案。但是，我不明白为什么 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 身份验证初始化后执行。