Проблема чтения данных из Firebase при перезагрузке страницы - Vue.js

Question

Я пытаюсь создать страницу профиля для пользователей.

Я создал страницы входа в систему / регистрации и использую аутентификацию firebase.Когда я пытался получить данные пользователей, все работает нормально, но если страница профиля перезагружается, я не вижу никаких данных.(Мне нужно сначала пойти куда-то еще, а затем вернуться на страницу профиля, все снова в порядке.)

Я использую vue.js, довольно новое в обеих технологиях.

Я пытался понятьжизненные циклы (и также попробовал все варианты), но я не мог решить проблему.

<template>
<div>
    <h2>Profile</h2>
    <h6><b>User Name:</b> {{details.name}} </h6>
    <h6><b>User Email:</b> {{details.email}} </h6>
    <h6><b>User photoUrl:</b> {{details.photoUrl}} </h6>
    <h6><b>User uid:</b> {{details.uid}} </h6>
    <h6><b>User EmailVerified:</b> {{details.emailVerified}} </h6>
</div>
</template>

<script>
import firebase from 'firebase'

    export default {
        data() {
            return {
                user: firebase.auth().currentUser,
                details: {
                    name: '', 
                    email: '', 
                    photoUrl: '', 
                    uid: '', 
                    emailVerified: ''
                }
            }
        },
        created(){
            if(this.user){
                console.log('There is a user')
                this.details.name = this.user.displayName,
                this.details.email = this.user.email,
                this.details.photoUrl = this.user.photoURL,
                this.details.emailVerified = this.user.emailVerified,
                this.details.uid = this.user.uid

            } else {
                console.log('No user')
            }
        },
        methods: {

        },
    }
</script>

Answer 1

Обычно я сохраняю исходную логику состояния авторизации firebase вне экземпляра Vue (но затем использую методы vue, как обычно, для взаимодействия страниц после загрузки).

Инициализируйте ваш пользовательский объект данных vue с ключами, которые вы намереваетесьиспользуйте и ищите пользовательский uid (поскольку все пользователи будут иметь это, включая анонимных пользователей) для v-if.

Вы также можете убедиться, что onAuthStateChanged был выполнен до обновления пользовательских данных (не помню, если выМожно предположить, что он будет выполнен до того, как будет создан экземпляр vue, или нет, но это гарантирует, что вы не загрузите пользовательские данные, которые появятся после создания экземпляра vue на всякий случай), имея логическое значение (например, authChecked)изменился с false на true, когда onAuthStateChanged был выполнен, и с помощью метода (который используется в 'create'), который снова и снова запускается сам с использованием setTimeout, если authChecked еще не верно.

Все это (инекоторые другие небольшие дополнения ниже) обеспечат отображение только тех данных, которые у вас есть,получите полученную ошибку и загрузят пользовательские данные, если firebase получит их после создания экземпляра vue, например

<template>
    <div v-if="user.uid">
        <h2>Profile</h2>
        <h6 v-if="user.displayName"><b>User Name:</b> {{user.displayName}} </h6>
        <h6 v-if="user.email"><b>User Email:</b> {{user.email}} </h6>
        <h6 v-if="user.emailVerified"><b>User EmailVerified:</b> {{user.emailVerified}} </h6>
        <h6 v-if="user.photoUrl"><b>User photoUrl:</b> {{user.photoUrl}} </h6>
        <h6><b>User uid:</b> {{user.uid}} </h6>
    </div>
</template>

<script>
import firebase from 'firebase'

const auth = firebase.auth()
var authChecked = false;

var user = auth.onAuthStateChanged(function(user) {
    if(user) {
        return user
    } else {
        return null
    }
    authCkecked = true;
})

export default {
    data() {
        return {
            user: {
                displayName: ""
                email: ""
                emailVerified: "" 
                photoUrl: ""
                uid: ""
            }
        }
    },
    created() {
        this.updateUser;
    },
    methods: {
        updateUser() {
            if (authChecked) {
                if (user) {
                    this.user = user
                } else {
                    console.log('No user')
                }
            } else {
                setTimeout(this.updateUser, 200)
            }
        }
    }
}
</script>

Answer 2

   <template>
<div v-if="user">
    <h2>Profile</h2>
    <h6><b>User Name:</b> {{user.displayName}} </h6>
    <h6><b>User Email:</b> {{user.email}} </h6>
    <h6><b>User photoUrl:</b> {{user.photoUrl}} </h6>
    <h6><b>User uid:</b> {{user.uid}} </h6>
    <h6><b>User EmailVerified:</b> {{user.emailVerified}} </h6>
</div>
</template>


 <script> import firebase from 'firebase'

    export default {
        data() {
            return {
                user: null
                }
            }
        },
        created(){
        firebase.auth().onAuthStateChanged(function(user) {
          if (user) {
                this.user = user
             } else {
                console.log('No user')
                this.user = null
                }
              });

        },
        methods: {

        },
    } </script>

Рекомендованный способ получить пользователя - через слушателя, здесь также более подробно описано https://firebase.google.com/docs/auth/web/manage-users

Я также отредактировал ваш код, чтобы сделать ваш код меньше с тем же результатом.