1

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

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

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

4

1 回答 1

3

我遇到了这种情况，作为解决方法，我使用具有UIDas 属性的组件包装器，如果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>
于 2017-02-14T22:03:06.970 回答