Angular多Firebase应用中自定义初始化应用的登录持久化失效问题

针对你在Angular 13 + AngularFire 7环境中，手动初始化的Firebase应用无法实现登录持久化的问题，可通过以下方案修复：

核心问题分析 #

你当前使用的是Firebase旧版命名空间API（firebase.initializeApp），而AngularFire 7基于Firebase v9+模块化API构建，两者混用会导致Auth持久化机制兼容性异常，这是手动初始化应用持久化失效的主要原因。

解决方案 #

1. 切换到Firebase模块化API #

改用模块化API统一管理多应用的Auth实例，确保与AngularFire 7兼容：

import { Injectable } from '@angular/core';
import { initializeApp, FirebaseApp, getApps, getApp } from 'firebase/app';
import { 
  getAuth, Auth, setPersistence, signInWithEmailAndPassword, 
  browserLocalPersistence, browserSessionPersistence, UserCredential,
  onAuthStateChanged
} from 'firebase/auth';
import { getFirestore, enablePersistence } from 'firebase/firestore';
import environment from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class AuthService {
    private appStoreAdm: FirebaseApp;
    private appStoreAdmAuth: Auth;

    constructor() {
        // 避免重复初始化应用
        if (!getApps().some(app => app.name === 'appStoreAdm')) {
            this.appStoreAdm = initializeApp(environment.appStoreAdm, 'appStoreAdm');
            this.appStoreAdmAuth = getAuth(this.appStoreAdm);
            // 初始化Firestore持久化
            enablePersistence(getFirestore(this.appStoreAdm));
        } else {
            this.appStoreAdm = getApp('appStoreAdm');
            this.appStoreAdmAuth = getAuth(this.appStoreAdm);
        }

        // 监听Auth状态，确保页面刷新后加载持久化会话
        onAuthStateChanged(this.appStoreAdmAuth, (user) => {
            if (user) {
                // 可在此处理已持久化的用户状态
            }
        });
    }

    public async login(app: string, email: string, password: string, remember: boolean): Promise<UserCredential> {
        const authInstance = this.getAuthInstance(app);
        if (!authInstance) throw new Error(`未知应用：${app}`);

        // 设置持久化策略
        const persistMode = remember ? browserLocalPersistence : browserSessionPersistence;
        await setPersistence(authInstance, persistMode);

        // 执行登录
        return signInWithEmailAndPassword(authInstance, email, password);
    }

    private getAuthInstance(appName: string): Auth | undefined {
        switch(appName) {
            case 'defaultApp':
                return getAuth(); // 默认应用直接获取Auth实例
            case 'appStoreAdm':
                return this.appStoreAdmAuth;
            // 其他应用的Auth实例在此扩展
            default:
                return undefined;
        }
    }
}

2. 关键优化点说明 #

• 避免重复初始化：通过getApps()检查应用是否已存在，防止服务重复注入时多次初始化Firebase应用。
• 提前绑定Auth实例：在服务初始化时就获取并缓存Auth实例，避免每次登录时重复创建实例导致状态丢失。
• 强制状态监听：通过onAuthStateChanged确保页面刷新后，Auth实例能自动加载持久化的用户会话。
• 持久化设置时机：在登录操作前调用setPersistence，确保策略生效（模块化API要求此操作在任何Auth交互前执行）。

3. 额外检查项 #

• 确认手动初始化的Firebase应用配置（environment.appStoreAdm）中authDomain字段正确，且Firebase控制台已启用邮箱/密码登录方式。
• 确保浏览器未禁用本地存储（LOCAL持久化依赖localStorage，SESSION依赖sessionStorage）。

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