如何将Firebase onAuthStateChanged中的user对象提升至顶层并外部访问？

当然可以把user对象提升到顶层，但得注意Firebase auth状态的异步特性——直接在onAuthStateChanged外部访问它可能会拿到null或者undefined，下面是具体的实现步骤和最佳实践：

1. 顶层声明用户变量 #

在你的firebase-config.js或者Vue组件的脚本顶层（比如<script>标签最开头）声明一个变量，初始值设为null：

// 顶层全局变量（或模块级变量）
let currentUser = null;

2. 监听Auth状态更新变量 #

在Firebase初始化完成后，通过onAuthStateChanged监听用户登录/登出状态，实时更新顶层的currentUser：

import * as firebase from "firebase";

const config = {
  apiKey: "XXXXXX",
  authDomain: "XXXXXX.firebaseapp.com",
  databaseURL: "https://XXXXXX.firebaseio.com",
  projectId: "XXXXXX",
  storageBucket: "XXXXXX.appspot.com",
  messagingSenderId: "XXXXXX"
};

// 初始化Firebase应用
firebase.initializeApp(config);

// 顶层用户变量
let currentUser = null;

// 监听auth状态变化，更新变量
firebase.auth().onAuthStateChanged(user => {
  currentUser = user;
  // 用户状态更新后，再初始化依赖用户的Firebase Refs
  if (user) {
    initUserRelatedRefs();
  } else {
    // 用户登出时可以清空相关数据或做其他处理
    resetUserRelatedData();
  }
});

3. 安全创建依赖用户的Ref #

由于auth状态是异步获取的，不要在顶层直接创建依赖用户的Ref，而是要等currentUser存在后再创建，比如通过上面的initUserRelatedRefs函数：

function initUserRelatedRefs() {
  // 此时currentUser已被正确赋值，可以安全使用
  const userProfileRef = firebase.database().ref(`users/${currentUser.uid}/profile`);
  const userPostsRef = firebase.database().ref(`users/${currentUser.uid}/posts`);
  
  // 如果是在Vue组件中，就可以用VueFire的$bind方法绑定到组件数据
  // 比如在组件中：this.$bind('profile', userProfileRef)
}

function resetUserRelatedData() {
  // 清空用户数据或重置Ref
}

4. Vue组件中的响应式最佳实践 #

如果是在Vue组件中使用，更推荐把currentUser放到Vue的响应式数据里，这样模板和计算属性能自动响应用户状态的变化：

<template>
  <div v-if="currentUser">
    <h3>欢迎，{{ currentUser.displayName }}</h3>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
  <div v-else>请登录</div>
</template>

<script>
import firebase from 'firebase'

export default {
  data() {
    return {
      currentUser: null,
      posts: []
    }
  },
  created() {
    firebase.auth().onAuthStateChanged(user => {
      this.currentUser = user
      if (user) {
        // 绑定依赖用户的Firebase Ref到组件数据
        const postsRef = firebase.database().ref(`users/${user.uid}/posts`)
        this.$bind('posts', postsRef)
      } else {
        // 用户登出时清空绑定的数据
        this.posts = []
      }
    })
  }
}
</script>

关键提醒 #

Firebase的auth状态获取是异步操作，页面加载初期currentUser会是null，所以绝对不要在onAuthStateChanged回调外部直接依赖currentUser创建Ref或执行需要用户信息的逻辑——必须等待回调触发后，确认user存在再执行。

内容的提问来源于stack exchange，提问作者Joao Alves Marrucho