Vue导航守卫中路由切换与页面刷新的区分及Firebase鉴权适配

不要依赖固定延迟等待Firebase自动登录，官方推荐通过监听onAuthStateChanged事件来准确捕获认证状态就绪的时机，同时区分页面刷新与路由切换场景，以下是可行方案：

核心思路 #

1. 全局维护认证初始化状态与当前用户信息
2. 通过onAuthStateChanged监听Firebase认证状态变化，标记初始化完成
3. 路由守卫中区分两种场景：
   • 路由切换：直接使用已稳定的认证状态判断
   • 页面刷新/直接访问：等待认证初始化完成后再判断

实现代码 #

1. 初始化Firebase认证监听 #

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
// 标记认证是否初始化完成
let authInitialized = false;
// 存储当前用户
let currentUser = null;

// 监听认证状态变化，初始化完成后更新状态
onAuthStateChanged(auth, (user) => {
  currentUser = user;
  authInitialized = true;
});

2. 路由守卫逻辑 #

router.beforeEach(async (to, from, next) => {
  // 场景1：路由切换（非页面刷新），直接用现有状态判断
  if (from.name) {
    if (!currentUser && to.name !== 'signInPage') {
      next('/sign-in');
    } else {
      next();
    }
    return;
  }

  // 场景2：页面刷新/直接访问，等待认证初始化完成
  if (!authInitialized) {
    // 用Promise等待认证状态首次触发
    await new Promise(resolve => {
      const unsubscribe = onAuthStateChanged(auth, () => {
        unsubscribe(); // 只监听一次初始化完成的事件
        resolve();
      });
    });
  }

  // 认证初始化完成后，执行跳转判断
  if (!currentUser && to.name !== 'signInPage') {
    next('/sign-in');
  } else {
    next();
  }
});

关键说明 #

• 避免固定延迟：硬编码500ms不可靠，网络环境差异会导致要么等待不足要么等待冗余
• 准确识别刷新：from.name === null是判断页面刷新/直接访问的可靠依据，路由切换时from必然带有已定义的路由名称
• 可扩展优化：如果使用状态管理库（如Pinia/Vuex），可以将currentUser和authInitialized存入全局状态，方便组件共享

内容的提问来源于stack exchange，提问作者Wasiq Bin Zahid