重新加载页面时的 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

   <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

我还编辑了您的代码，以使您的代码更少但结果相同。

Answer 2

我通常将初始的 firebase 身份验证状态逻辑保留在 Vue 实例之外（然后像往常一样使用 vue 方法在加载后进行页面交互）。

使用您打算使用的键初始化您的 vue 数据用户对象，并为 v-if 查找用户 uid（因为所有用户都将拥有此，包括匿名用户）。

您还可以确保 onAuthStateChanged 在用户数据更新之前已执行（不记得您是否可以假设它会在创建 vue 实例之前执行，但这将确保您不会加载在创建 vue 实例后出现的用户数据以防万一）通过在 onAuthStateChanged 执行时将布尔值（例如 authChecked）从 false 更改为 true，并使用自行运行的方法（在“created”中使用）如果 authChecked 还不是真的，一次又一次地使用 setTimeout。

所有这些（以及下面的一些其他细微添加）将确保您只显示您拥有的数据，不会收到您遇到的错误，并且如果在创建 vue 实例后 firebase 碰巧检索到用户数据，则会加载用户数据例如

<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>