аутентификация nuxt и firebase с cookie и asyncData - PullRequest
Новая
       15

аутентификация nuxt и firebase с cookie и asyncData

0 голосов
/ 19 февраля 2019

Я использую 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
        }
    }
}

Поток входа в систему работает нормально, и каждый раз, когда я делаю изменения в компоненте, сохраняю его и nuxt перекомпилирует, свойство isLoggedIn устанавливается правильно.Однако, когда я перезагружаю страницу, она имеет значение 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
            }
        })
    },

Проблема заключается в том, что для целей отображения кнопки входа / выхода или других пользовательских компонентов они будут отображаться свошел в систему компонентов на секунду, пока он не начнет мигать и переключиться на вошедшие в систему компоненты.Похоже, это как-то связано с предварительным рендерингом на стороне сервера.Каким будет хороший способ получить доступ к серверу, если пользователь вошел в систему?

Я попытался добавить cookie, но когда я смотрю на asyncData на стороне сервера, я ничего не получаю.Например: 

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

},

Мне ничего не дает.Инспектор VUE даже не показывает свойство headers в моем компоненте.Мысли

...