Vue.js firebase 实例 - 用户 UID 作为数据库引用

Posted

技术标签:

【中文标题】Vue.js firebase 实例 - 用户 UID 作为数据库引用【英文标题】:Vue.js firebase instance - Users UID as database ref 【发布时间】:2020-08-24 05:31:31 【问题描述】:

是否可以使以下示例正常工作?我已将一些对象推送到 firebase 实时数据库中,参考是登录用户的 UID。但是,即使我想在我们可以从 firebase.auth.currentUser.uid 获得的引用处查询对象,我也会得到一个 NULL 的错误 uid。有没有办法让这个功能工作?

Vue.js 代码:

import firebase from '.././firebase';
import  db  from '.././firebase';



export default 
    name: 'addMatch',
    data() 
        return
            tableTennisData: [],
            player1Name: '',
            player2Name: '', 
            //Game 1
            firstMatchPlayer1Game1: '',
            firstMatchPlayer1Game2: '',
            firstMatchPlayer1Game3: '',
            firstMatchPlayer1Game4: '',
            firstMatchPlayer1Game5: '',
      
    ,

    firebase: 
        tableTennisData: db.ref(firebase.auth().currentUser.uid).child('tableTennis'), // UID Of Null error!
    ,
        addMatch: function (e)
            e.preventDefault();
            const obj = 
            //Game 1
            player1Name: this.player1Name,
            player2Name: this.player2Name,
            firstMatchPlayer1Game1: this.firstMatchPlayer1Game1,
            firstMatchPlayer1Game2: this.firstMatchPlayer1Game2,
            firstMatchPlayer1Game3: this.firstMatchPlayer1Game3,
            firstMatchPlayer1Game4: this.firstMatchPlayer1Game4,
            firstMatchPlayer1Game5: this.firstMatchPlayer1Game5,
            
            firebase.auth().onAuthStateChanged(function ()
                db.ref(firebase.auth().currentUser.uid).child('tableTennis').push(obj);
            );

            console.log(obj);
        ,

    ,

【问题讨论】:

"I'm getting an error uid of NULL" 您收到的确切错误消息是什么,发生在哪一行? @FrankvanPuffelen 感谢您的回答 :) 通过将 firebase 数据库对象分配给“tableTennisData”数组,我遇到了错误。在特定行有注释。错误消息:“addMatch.vue?c217:231 Uncaught TypeError: Cannot read property 'uid' of null” @FrankvanPuffelen 如何将 Firebase 对象从 Vue 包装到 onAuthStateChange 处理程序中?由于 Vue.js 语法,这很困难...... 【参考方案1】:

听起来用户还没有登录。

请注意,当您加载页面时,Firebase 需要一段时间才能恢复用户的身份验证状态。如果您在此之前拨打auth.currentUser,您将回复null

tableTennisData: db.ref(firebase.auth().currentUser.uid).child('tableTennis'), 

我看不到您在哪里调用此代码,但您需要将其包装在 onAuthStateChanged 处理程序中,就像在 addMatch 中所做的那样。

【讨论】:

再次感谢您的回复。但是我怎样才能将它包装到 onAuthStateChange 处理程序中呢?

以上是关于Vue.js firebase 实例 - 用户 UID 作为数据库引用的主要内容,如果未能解决你的问题,请参考以下文章

如何删除用户点击按钮? - Firebase - Vue.js

如何使用 Vue.js Firebase UID 删除用户

Vue.js 和 Firebase:删除了一个测试用户,现在所有路由都无法访问并且组件不呈现

用户在 Vue.js 和 Firebase 中注册后更改导航栏的状态

如何在验证电子邮件之前阻止 Firebase/Vue.js 中的用户身份验证

如何在vue js项目中检测用户的firebase身份验证登录状态?