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

请注意，我不尝试基于auth状态进行任何重定向。我知道这些答案已经存在，并且已经检查过了。

Answer 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已经初始化

在重定向到应用程序时：

例如，如果用户从支付服务提供商重新进入我的应用程序，则在firebaseAuth插件加载并将用户数据保存在vuex存储中之前，vuex存储为空。我使用localStorage在此处保留公共用户，因此该应用程序认为我们仍在登录。https://www.npmjs.com/package/nuxt-vuex-localstorage
在后台触发onAuthStateChanged。感觉不对。

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

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

Answer 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身份验证后执行主要应用程序内容。

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

让我解释一下

2 个答案: