刷新页面调用initializeApp导致localStorage存储的auth令牌丢失如何解决

问题根本原因 #

• 持久化设置时机错误：仅在登录时设置browserLocalPersistence，页面刷新后重新初始化的Auth实例默认使用会话级持久化，会自动清除localStorage中存储的登录令牌
• Auth实例未绑定指定App：调用getAuth()时未传入已初始化的App实例，容易出现实例不匹配导致状态丢失

解决方法 #

步骤1：调整初始化逻辑，Auth初始化时直接配置持久化 #

在调用initializeApp完成后立即初始化Auth并设置持久化，不要延迟到登录操作时配置：

this._app = initializeApp({
  apiKey: this._apiKey,
  authDomain: `${this._projectId}.firebaseapp.com`,
  projectId: this._projectId,
  storageBucket: `${this._projectId}.appspot.com`,
  messagingSenderId: this._senderId,
  appId: this._appId
});

this._db = getFirestore(this._app);
// 初始化绑定当前App的Auth实例
this._auth = getAuth(this._app);
// 全局配置持久化级别，无需每次登录重复设置
setPersistence(this._auth, browserLocalPersistence)
  .catch(err => console.error("持久化配置失败：", err));

如果初始化代码环境支持顶层await，也可以用await setPersistence(...)的写法，确保后续Auth操作都在持久化配置完成后执行。

步骤2：修改登录方法，复用预配置的Auth实例 #

async login(email, password) {
  // 直接使用已完成持久化配置的全局Auth实例即可
  return signInWithEmailAndPassword(this._auth, email, password);
}

额外注意事项 #

• 不要重复调用initializeApp初始化同一项目的App实例，单次页面加载仅执行一次初始化即可，重复初始化会清空所有关联状态
• 校验登录状态时不要直接读取localStorage存储的令牌，应使用onAuthStateChanged(this._auth, user => { ... })监听登录状态，Auth实例初始化完成后会自动同步本地存储的有效登录状态

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