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>

推荐的获取用户的方法是通过侦听器，在此JSR-163

进行了更深入的描述。

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

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>

重新加载页面时Firebase数据读取问题-Vue.js

2 个答案: