【问题标题】:How to retrieve from Firebase based on current user如何根据当前用户从 Firebase 中检索
【发布时间】:2017-07-24 21:51:08
【问题描述】:

这是交易。 我正在使用 VueFire,并想从我设置的 Firebase 数据库中检索数据。在那里我有一个用户节点,每个节点都由一个唯一的 ID 定义。此外,对于每个用户,我都有一个数组,里面装满了他们要购买的物品。为了使其动态化,我在 firebase 钩子中调用引用,如下所示:

export default {
  firebase:{
      cart: app.database().ref('users')
  }, //and so on and so on
}

我想检索当前用户,而不是.ref('users'),使用他的唯一ID,如下所示:.ref('users/' + user.uid + '/cart') 要获取当前用户 uid,我会使用 firebase.auth().onAuthStataChanged(user=>{//code here}) 的观察者 问题是,由于这是异步的,firebase 挂钩在当前用户被检索之前激活。我尝试简单地调用firebase.auth().currentUser,但这也很慢且使用不可靠。 我愿意接受任何形式的建议!

【问题讨论】:

  • 您需要将其连接起来,以便在 onAuthStateChanged 触发之后异步绑定引用。您必须等待它触发才能准确了解用户 ID 以及用户是否已登录。
  • 我遇到了同样的问题,我正在使用firebase.auth().currentUser 这样做:users: this.$root.db.ref('users/' + firebase.auth().currentUser.uid) 我尝试在created() 上检查uid 并设置它,然后使用@987654331 @ 而不是 firebase.auth().currentUser.uid 但这不起作用。如果有的话,我也在寻找更好的解决方案。

标签: node.js firebase firebase-realtime-database firebase-authentication vuejs2


【解决方案1】:

我制定了一个适合我的情况的解决方案,可能适合你的情况。

我所做的是在用户通过身份验证时附加值侦听器,然后在用户失去身份验证时关闭它们。使用这种方法,我只要求在用户实际通过身份验证时检索用户数据。我是这样做的:

this.$root.firebase.auth().onAuthStateChanged(user => {
  if (user) {
    this.$store.dispatch('setUserUID', user.uid)
    // Listen for User Data
    let dataRef = this.$root.db.ref('/userdata/' + user.uid)
    let self = this
    dataRef.on('value', function(snap) {
        let value = snap.val()
        self.$store.dispatch('setUserData', value)
      })
  }
  else {
    // Stop Listening for User Data
    this.$root.db.ref('/userdata/' + this.$store.state.user.uid).off()
    this.$store.dispatch('setUserUID', null)
  }
})

【讨论】:

  • 应该放在哪个钩子上?或者可能在export default 之前?因为我需要将 ref 附加到 firebase 绑定。
  • 当用户通过身份验证时,您可以按照文档中的描述手动创建 VueFire 绑定。因此,在onAuthStateChanged 期间,您检查是否有user,如果有,您将执行vm.$bindAsObject('user', myFirebaseRef.child('user')),如果没有用户,您可以执行vm.$unbind('items')
【解决方案2】:

好的,我明白了。感谢@Daniel D 关于绑定为数组或对象的提示。因此,事实证明我不必在 firebase 引用挂钩中执行此操作,我只需将其绑定为 mounted() 挂钩中的数组即可。我只是在数据中声明一个空的cart: [],然后像这样填充它:

<script>
import changeColorMixin from '../mixins/changeColorMixin'
import animateFunction from '../mixins/animationMixin'
import Firebase from 'firebase'
import app from '../firebaseApp'

export default {
 data(){
   return{
     isLoggedIn: '',
     cart: []
   }
 },
 methods:{
    changeColor: changeColorMixin,
    animateEntrance: animateFunction,
    promptLogin: function(){
    console.log('you need to login!');
},
chooseSize: function($event){
    $($event.target).parents().eq(2).addClass('chosen');
},
closeOrder: function($event) {
    $($event.target).parents().eq(2).removeClass('chosen');
},
makeOrder: function($event){
    var $this = this;
    Firebase.auth().onAuthStateChanged(function(user){
        if(user){
            var cartRef = app.database().ref('users/' + user.uid + '/cart');
                var currentCart;
                cartRef.once('value', function(result) {
                    currentCart = result.val();
                    var size = $($event.target).html();
                    var name = $($event.target).parents().eq(2).attr('id');
                    app.database().ref('users/' + user.uid + '/cart/' + name + '/count').once('value', function(snap){
                        var count = snap.val();
                        if(count > 0){
                            count = count + 1;
                        }else{
                            count = 1;
                        }
                        cartRef.child(name).set({
                            size: size,
                            count: count,
                            name: name
                        });
                    });
                });
            }else{
                console.log('gotta login mate');
            }
        });
    }
},
mounted(){
Firebase.auth().onAuthStateChanged(user => {
  if(user){
    this.isLoggedIn = true;
        var cartRef = app.database().ref('users/' + user.uid + '/cart');
        this.$bindAsArray('cart', cartRef);
  }else{
    this.isLoggedIn = false;
  }
});
    this.animateEntrance();
    this.changeColor();
  }
}
</script>

正如我所说的,非常感谢@Daniel D

【讨论】:

  • 不客气。记得给对你有帮助的 cmets 投票!谢谢!
  • 声望不够,抱歉
猜你喜欢
  • 2019-05-03
  • 1970-01-01
  • 1970-01-01
  • 2017-10-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多