Vue.js结合Firebase Authentication如何避免首次加载重复渲染？

嘿，我完全懂你遇到的困扰——把Vue实例绑定在Firebase的onAuthStateChanged回调里，确实能保证在渲染前拿到用户登录状态，但两次渲染的问题其实是Firebase Auth的初始化逻辑导致的，咱们一步步来解决它。

问题根源 #

Firebase Auth在页面加载时会触发两次状态回调：

1. 初始状态回调：页面刚加载时，Firebase还没完成本地缓存的用户信息读取，此时user为null，你的代码会创建Vue实例。
2. 最终状态回调：当Firebase完成本地缓存读取后，如果用户之前登录过，会再次触发onAuthStateChanged并传入有效的user对象。虽然此时不会重新创建Vue实例，但用户状态的变化会触发依赖该状态的组件重新渲染，所以看起来像是页面被渲染了两次。

解决方案：等待Auth状态确定后再初始化Vue #

我们可以把Auth状态的获取包装成一个Promise，只等待Firebase返回最终的用户状态（不管是登录还是未登录），再创建Vue实例，这样就能避免初始null状态带来的额外渲染。

修改后的main.js代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import firebase from 'firebase/app'
import 'firebase/auth'

// 包装Auth状态获取为Promise，确保只拿到最终状态
function waitForAuthReady() {
  return new Promise((resolve) => {
    // 监听一次状态变化后立即取消订阅
    const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
      unsubscribe();
      resolve(user);
    }, (error) => {
      console.error('Auth初始化出错:', error);
      unsubscribe();
      resolve(null);
    });
  });
}

// 等待Auth状态就绪后再初始化Vue
waitForAuthReady().then((user) => {
  if (user) {
    // 这里执行你的已登录逻辑，比如同步用户状态到Vuex
    store.dispatch('auth/setCurrentUser', user);
  }
  
  // 只初始化一次Vue实例
  new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
  });
});

额外优化建议 #

• 如果你的路由有登录权限控制，可以在Auth状态就绪后再初始化路由，避免不必要的路由跳转。
• 在Vuex中维护用户状态时，确保初始化时就传入正确的user对象，组件挂载时直接使用最终状态，减少渲染次数。

内容的提问来源于stack exchange，提问作者wobsoriano