Angular12搭配@angular/fire^7、firebase^9使用Google OAuth及懒加载模块Auth管理问题

你已经完成了根模块的Firebase核心初始化，可根据业务场景选择以下两种方案管理Auth服务：

方案1：全局单例Auth（90%以上场景推荐） #

Auth状态本身是全局唯一的，优先选择在根模块全局注册Auth provider，所有懒加载模块可直接注入使用，无需额外重复配置。

1. 先修改根模块app.module.ts，新增Auth相关导入和注册：

// 新增导入
import { getAuth, provideAuth } from '@angular/fire/auth';

@NgModule({
  imports: [
    provideFirebaseApp(() => initializeApp({ /* 你的Firebase配置 */ })),
    provideFirestore(() => getFirestore()),
    // 新增Auth provider注册
    provideAuth(() => getAuth()),
  ],
  // ...其余配置保持不变
})
export class AppModule { }

2. 懒加载模块内直接注入使用即可，示例：

import { Component } from '@angular/core';
import { Auth, signInWithEmailAndPassword, onAuthStateChanged } from '@angular/fire/auth';

@Component({
  // 组件配置
})
export class LazyModuleComponent {
  constructor(private auth: Auth) {
    // 监听登录状态
    onAuthStateChanged(this.auth, user => {
      console.log('当前登录用户：', user);
    });
  }

  // 调用登录方法示例
  async login(email: string, password: string) {
    await signInWithEmailAndPassword(this.auth, email, password);
  }
}

该方案的优势是Auth状态全局统一，不会出现多实例导致的状态不一致问题，维护成本最低

方案2：懒加载模块独立Auth实例（特殊场景使用） #

如果业务需要为特定懒加载模块配置独立的认证体系（比如多租户业务、子模块对接单独的Firebase项目），可在懒加载模块内单独注册Auth provider，和全局Auth实例隔离：

import { NgModule } from '@angular/core';
import { getApp, initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';

@NgModule({
  imports: [
    // 初始化独立的Firebase实例，通过第二个参数指定名称和全局实例区分
    provideFirebaseApp(() => initializeApp({ /* 子模块专属Firebase配置 */ }, 'lazyModuleApp')),
    // 基于独立实例注册Auth服务
    provideAuth(() => getAuth(getApp('lazyModuleApp'))),
    // 子模块其余依赖配置
  ],
  declarations: [/* 子模块内的组件、指令等 */]
})
export class YourLazyFeatureModule { }

该方案下子模块的Auth状态和全局完全隔离，无特殊需求不建议使用，避免出现状态管理混乱

补充说明 #

如果需要给懒加载模块添加路由登录校验，直接使用Angular Fire提供的路由守卫即可，用法和非懒加载模块完全一致，不需要额外适配。

内容的提问来源于stack exchange，提问作者Julio César Melchor Pinto