Question

在包含Vue和Firebase的简单SPA中，有两条路线：登录和聊天。

登录后，用户将被重定向到聊天路线，其中Firebase数据库绑定是使用vuefire $bindAsArray()在created()生命周期挂钩内手动完成的。这是因为绑定需要Firebase身份验证分配的uid可用。

这很好用，直到用户刷新页面。如果auth().currentUser用于获取uid，则返回null。如果使用auth().onAuthStateChanged()观察程序，则Vue会在Firebase数据库绑定完成之前尝试呈现该组件。我错过了什么？

Answer 1

我遇到过这种情况，因为解决方法我使用UID作为属性的组件包装器，如果UID为null则显示等待消息/动画，否则显示原始组件。

我在这里发布它的真实场景有点复杂（firebase，routing，vuex）但基本上这个包装器组件看起来应该与此类似

<template>
<component :is="CurrentComponent" />
</template>

<script>
import App from './App';
import WaitingAnimation from './WaitingAnimation';

export default {
  data() {
    return {
      Uid: null,
    }
  },
  computed: {
    CurrentComponent() {
      return this.Uid == null ? WaitingAnimation : App;
    }
  }
  beforeMount() {
    //While Firebase is initializing `Firebase.auth().currentUser` will be null
    let currentUser = Firebase.auth().currentUser;

    //Check currentUser in case you previously initialize Firebase somewhere else
    if (currentUser) {
      //if currentUser is ready we just finish here
      this.Uid = currentUser.uid;
    } else {
      // if currentUser isn't ready we need to listen for changes
      // onAuthStateChanged takes a functions as callback and also return a function
      // to stop listening for changes 
      let authListenerUnsuscribe = Firebase.auth().onAuthStateChanged(user => {
        //onAuthStateChanged can pass null when logout 
        if (user) {
          this.Uid = user.uid;
          authListenerUnsuscribe(); //Stop listening for changes
        }
      });
    }
  }
}
</script>

使用Firebase用户UID和vuefire手动绑定

1 个答案: