Angular+FirebaseUI：如何获取authState的currentUser用于*ngIf条件渲染

没问题，我来帮你搞定这个Angular和FirebaseUI的用户状态判断问题！

首先，你需要把authState返回的数据存到组件的公共属性里——因为模板只能访问组件类里的属性，直接在subscribe回调里的变量是没法被模板读取到的。

第一步：在组件类中保存用户状态 #

先在你的组件里定义一个属性来存储用户数据，还可以引入Firebase的User类型来获得更友好的类型提示：

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
// 导入Firebase的User类型，提升代码类型安全性
import { User } from 'firebase/auth';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  // 初始化用户状态为null，避免初始值undefined导致的报错
  currentUser: User | null = null;

  constructor(private afAuth: AngularFireAuth) { }

  ngOnInit(): void {
    // 订阅authState，把返回结果里的currentUser赋值给组件属性
    this.afAuth.authState.subscribe(authResult => {
      this.currentUser = authResult?.currentUser || null;
      console.log('当前登录用户:', this.currentUser);
    });
  }
}

第二步：用*ngIf实现条件渲染 #

现在模板可以直接通过currentUser属性来判断用户是否登录，结合可选链操作符?.还能避免初始加载时的报错：

<!-- 用户已登录时显示的内容 -->
<div *ngIf="currentUser">
  <h3>欢迎回来，{{ currentUser.displayName }}！</h3>
  <p>你的登录邮箱：{{ currentUser.email }}</p>
  <!-- 这里可以放只有登录后才能访问的组件/按钮 -->
</div>

<!-- 用户未登录时显示的内容 -->
<div *ngIf="!currentUser">
  <p>请登录以访问完整功能</p>
  <!-- 这里放置FirebaseUI的登录组件 -->
</div>

如果你更想保留完整的authState返回数据，也可以把整个结果存起来，模板里直接访问authData?.currentUser：

// 组件类里修改为保存完整的auth结果
authData: any;

ngOnInit(): void {
  this.afAuth.authState.subscribe(authResult => {
    this.authData = authResult;
  });
}

模板对应修改：

<div *ngIf="authData?.currentUser">
  <!-- 登录状态内容 -->
</div>
<div *ngIf="!authData?.currentUser">
  <!-- 未登录状态内容 -->
</div>

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