Firebase登录后页面刷新丢失已登录用户状态问题

问题原因 #

代码存在3个核心逻辑错误导致登录状态无法持久化：

• 持久化配置时机错误：setPersistence(auth, browserLocalPersistence)被放在登录成功的回调里执行，该API必须在发起登录请求前调用才会生效，登录完成后再设置无法对当前登录会话生效。
• 用户实例取值逻辑错误：页面初始化时就同步读取const user = auth.currentUser，Firebase Auth初始化是异步过程，页面刚加载时SDK还没完成本地存储的凭证恢复，此时取到的currentUser永远是null；且onAuthStateChanged回调中没有使用回调参数返回的最新用户对象，一直引用外层提前缓存的null值，自然永远显示「Log in」。
• 不需要手动操作LocalStorage存储用户信息：browserLocalPersistence模式下SDK会自动完成用户凭证的本地存储和恢复，手动读写LocalStorage里的认证信息反而可能和SDK逻辑冲突，导致状态被异常清除。

修复后代码 #

// 初始化Auth实例，所有认证相关逻辑必须在初始化完成后执行
const auth = getAuth();

// 登录前先配置本地持久化，无需手动操作LocalStorage
setPersistence(auth, browserLocalPersistence).catch(err => {
  console.error('认证持久化配置失败:', err);
});

// 通过状态监听获取最新用户信息，回调参数的user才是实时有效的用户实例
onAuthStateChanged(auth, (user) => {
  const userplace = document.querySelector('.user');
  if (userplace) {
    userplace.innerHTML = user 
      ? `Welcome, ${user.displayName || user.email}` 
      : `Log in`;
  }
});

// 绑定表单提交事件
const loginform = document.querySelector('.loginform');
loginform.addEventListener('submit', (e) => {
  // 阻止表单默认提交刷新页面的行为
  e.preventDefault();
  const email = loginform.email.value;
  const password = loginform.password.value;

  signInWithEmailAndPassword(auth, email, password)
    .then(cred => {
      console.log('user logged in:', cred.user);
      loginform.reset();
    })
    .catch(err => {
      console.error('登录失败:', err);
    });
});

额外注意事项 #

• 不要在onAuthStateChanged回调外同步依赖auth.currentUser做权限判断、页面渲染逻辑，该值只有在状态监听回调触发后才是准确的。
• 不要手动修改、删除LocalStorage中Firebase自动生成的认证存储字段，避免SDK识别状态失败。
• 表单提交必须加e.preventDefault()，否则默认提交行为会触发页面刷新，打断登录流程。

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