将 Firebase 用户 UID 与 vuefire 手动绑定一起使用

Question

在使用 Vue 和 Firebase 的简单 SPA 中，有两种路由：登录和聊天。

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

这工作正常，直到用户刷新页面。如果使用auth().currentUser 获取uid，则返回null。如果使用 auth().onAuthStateChanged() 观察者，Vue 会在 Firebase 数据库绑定完成之前尝试渲染组件。我错过了什么？

Answer 1

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

我的真实场景有点复杂，在这里发布它（firebase、路由、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>