时间戳

首页 > 解决方案 > 重新加载页面时的 Firebase 数据读取问题 - Vue.js

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

问题描述

我正在尝试为用户创建个人资料页面。

我创建了登录/注册页面，并且正在使用 firebase auth。当我尝试获取用户数据时，一切正常，但如果重新加载配置文件页面，我将看不到任何数据。（我需要先去别的地方，然后再回到个人资料页面，一切都会好起来的。）

我正在使用 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>

标签： firebasevue.jsvuejs2firebase-authentication

解决方案

   <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

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

推荐阅读