Quasar应用中Firebase onAuthStateChanged与导航守卫的适配方案

我太懂你这个困扰了——用户登录后一刷新页面，firebase.auth().currentUser就返回null，导航守卫直接把人踢回登录页，但过一秒onAuthStateChanged又能拿到正确的用户信息，简直让人头大！

核心问题就是：刷新后Firebase需要从本地异步加载用户的认证状态，currentUser是同步获取的，这时候还没加载完成所以是null；而onAuthStateChanged会在认证状态就绪后触发，所以能拿到正确的用户。

下面是在Quasar中适配这个场景的成熟模式，核心是让导航守卫等待Firebase认证状态就绪后再做判断：

步骤1：封装Firebase认证状态的Promise #

在你的router/index.js里，先创建一个Promise来监听onAuthStateChanged，确保我们能等待认证状态初始化完成：

// Vue-router => index.js
// 封装一个Promise，用于等待Firebase auth状态就绪
const authReady = new Promise((resolve) => {
  firebase.auth().onAuthStateChanged(user => {
    console.log('onAuthStateChanged Invoked => ', user);
    resolve(user); // 状态就绪后返回用户
  });
});

这个Promise只会执行一次，后续导航守卫调用时会直接返回已就绪的用户状态，不会重复监听。

步骤2：修改导航守卫为异步函数 #

把router.beforeEach改成异步函数，先await authReady拿到正确的用户状态，再进行权限判断：

router.beforeEach(async (to, from, next) => {
  // 等待Firebase认证状态就绪，拿到当前用户
  const currentUser = await authReady;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if (requiresAuth && !currentUser) {
    next('signin');
  } else if (requiresAuth && !currentUser.emailVerified) {
    // 合并冗余判断，让逻辑更简洁
    next('signin');
  } else {
    next();
  }
});

为什么这个模式管用？ #

• 刷新页面后，authReady会等待onAuthStateChanged触发，确保我们拿到的是已经加载完成的用户状态，而非同步获取的null。
• 后续页面内的导航会直接复用这个Promise的结果，性能更优，不会重复触发认证监听。
• 完美适配Quasar的导航流程，彻底解决状态不同步导致的误跳转问题。

另外补充个小细节：如果你的Quasar项目用了Pinia或者Vuex管理用户状态，还可以在onAuthStateChanged的回调里更新store的用户信息，这样后续组件里也能直接从store获取用户，不用再依赖firebase.auth().currentUser啦。

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