编辑：

Question

我正在通过以下配置使用nuxt：

plugins/firebase-plugin.js（已添加到nuxt配置中）

import Vue from 'vue'
import * as firebase from 'firebase/app'
import 'firebase/auth'
if (!firebase.apps.length) {
Vue.prototype.$firebase = firebase.initializeApp({...})

然后在我的登录组件中执行以下操作：

import * as firebase from 'firebase/app'
import 'firebase/auth'
export default {
    name: "Login",
    data (){
        return {
            isLoggedIn: this.$firebase.auth().currentUser ? true : false
        }
    },
    methods: {
        login: function(){
            let provider = new firebase.auth.GoogleAuthProvider()
            this.$firebase.auth().signInWithPopup(provider).then(result => {
                this.isLoggedIn = true
                console.log('logged in')
            })

        },
        logout: function(){
            this.$firebase.auth().signOut()
            this.isLoggedIn = false
        }
    }
}

登录流程工作正常，并且只要我在组件中进行更改，保存并重新编译isLoggedIn属性，nuxt就会正确设置。但是，当我重新加载页面时，它设置为false。当我在控制台中手动运行$nuxt.$firebase.auth().currentUser时，我得到了用户对象。问题是，为什么这仅适用于重新编译的第一时间服务？

编辑：

最终，firebase需要一点时间进行初始化，直到currentUser属性正确为止。因此，将代码更改为此只需一个警告：

data (){
        return {
            firebaseLoading: true,
            isLoggedIn: this.$firebase.auth().currentUser
        }
    },
    created () {
        this.$firebase.auth().onAuthStateChanged((user) => {
            this.firebaseLoading = false
            if (user) {
                this.isLoggedIn = true
            } else {
                this.isLoggedIn = false
            }
        })
    },

问题是，出于显示登录/注销按钮或其他基于用户的组件的目的，将向他们显示未登录的组件一秒钟，直到其闪烁并切换到已登录的组件组件。这似乎与nuxt的服务器端预渲染有关。无论用户是否登录，服务器端获取的最佳方式是什么？

我尝试添加cookie，但是当我在服务器端查看asyncData时，什么也没得到。例如：

asyncData ({req}) {
        if(process.server){
            return {headers: req.headers.cookie}
        }
        return {headers: 1}

},

什么都没给我。 VUE检查器甚至没有在我的组件上显示headers属性。想法

使用cookie和asyncData的nuxt和firebase身份验证

编辑：

0 个答案: