基于Angular和Firebase实现登录后获取并监听用户个人档案数据

问题根因 #

原有代码存在三点核心问题：

1. 嵌套订阅存在内存泄漏风险，服务初始化时user还未完成赋值，构造函数内对user的订阅完全不会生效
2. 手动维护user的可空状态会大幅增加组件调用的复杂度
3. 登出时没有自动销毁Firestore文档的监听流，容易残留无效订阅

重构Auth Service代码 #

首先导入需要的RxJS依赖：

import { switchMap, map, shareReplay, EMPTY, Subscription } from 'rxjs';
import { UserInfo } from './你的类型定义路径'; // 替换为实际的UserInfo类型文件路径

修改服务核心逻辑：

@Injectable({ providedIn: 'root' })
export class AuthService {
  // 定义为稳定的Observable，未登录时自动不发射值，无需手动维护null状态
  public user$: Observable<UserInfo | null>;
  private globalSub: Subscription;

  constructor(
    private auth: AngularFireAuth,
    private fs: AngularFirestore,
    private router: Router
  ) {
    // 用RxJS操作符串联身份验证流和用户文档流
    this.user$ = this.auth.authState.pipe(
      // 身份验证状态变更时自动切换流
      switchMap(userCred => {
        if (userCred) {
          // 已登录：返回对应用户文档的实时变更流
          return this.fs.doc<UserInfo>(`users/${userCred.uid}`).snapshotChanges().pipe(
            // 转换快照为业务可用的用户数据，自动合并uid
            map(snap => {
              const data = snap.payload.data();
              return data ? { uid: userCred.uid, ...data } : null;
            })
          );
        } else {
          // 未登录/已登出：返回空流，自动销毁之前的文档监听
          return EMPTY;
        }
      }),
      // 缓存最新1条用户数据，多组件订阅不会重复请求Firestore
      shareReplay(1)
    );

    // 若需要全局监听用户数据可在此订阅，服务销毁时会自动取消
    this.globalSub = this.user$.subscribe(userDoc => {
      if (userDoc) {
        console.log('用户数据更新：', userDoc);
      }
    });
  }

  // 登出方法
  async logout() {
    await this.auth.signOut();
    // 登出后可自定义跳转逻辑
    this.router.navigate(['/login']);
  }

  // 服务销毁时取消全局订阅避免内存泄漏
  ngOnDestroy() {
    this.globalSub?.unsubscribe();
  }
}

组件调用方式 #

模板直接调用（推荐，无需手动管理订阅） #

Angular的async管道会自动处理订阅和销毁逻辑：

<div *ngIf="authService.user$ | async as user">
  <p>联系地址：{{ user.address }}</p>
  <p>喜爱的食物：{{ user.favouriteFoods.join('、') }}</p>
</div>

对应组件TS只需注入服务即可：

constructor(public authService: AuthService) {}

TS代码中手动订阅 #

如果需要在业务逻辑中处理用户数据，可手动订阅：

private userSub: Subscription;

ngOnInit() {
  this.userSub = this.authService.user$.subscribe(user => {
    if (user) {
      // 自定义业务逻辑
      console.log('当前用户地址：', user.address);
    }
  });
}

ngOnDestroy() {
  // 组件销毁时手动取消订阅
  this.userSub?.unsubscribe();
}

特性说明 #

• 状态自动兼容：用户未登录时user$不会发射值，无需额外做非空判断适配
• 监听自动销毁：用户登出时switchMap会自动取消之前的Firestore文档监听，无内存泄漏风险
• 数据实时同步：Firestore文档更新时所有订阅的组件都会自动收到最新数据
• 多组件共享：shareReplay缓存最新用户数据，不会重复触发Firestore请求

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