Angular Firebase ngIf 用户经过身份验证监听器在页面重新加载时不起作用

Question

我正在使用 firebase 中的 onAuthStateChanged 来监听用户的身份验证状态。我正在聆听导航组件中的这些更改，以决定是显示登录按钮还是注销按钮等。
如果我在应用程序中导航，这可以正常工作，但是当我刷新页面时，即使订阅被触发，DOM 也会反射(reflect)用户的状态。
可能是我忽略的一个简单修复，但我一直无法找到适用于我的研究的修复，并且投入了太多时间 -_- 请帮助!
这是我的 authService:

  private authStatusSub = new Subject();
  user$ = this.authStatusSub.asObservable();

  setAuthStatusListener() {
    this.auth.onAuthStateChanged((user) => {
      if (user) {
        this.usersService
          .getUserData(user.uid)
          .then((userData) => {
            this.authStatusSub.next(userData);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.authStatusSub.next(null);
        console.log('User has logged out');
      }
    });
  }

导航 typescript 文件:

  isAuthenticated: boolean;

  ngOnInit() {
    this.authService.setAuthStatusListener();
    this.authService.user$.subscribe((userData) => {
      if (userData) {
        this.isAuthenticated = true;
        console.log(userData);
      } else {
        this.isAuthenticated = false;
      }
    });
  }

导航html:

  <a routerLink="/login" *ngIf="!isAuthenticated" mat-button class="navButton">Login</a>
  <a mat-button *ngIf="isAuthenticated" class="navButton" (click)="onLogout()">Logout</a>

当我完成正常的应用程序流程并登录、注销并导航到主页(导航栏所在的位置)时，它按预期工作，但是当我刷新主页(导航栏所在的位置)时，状态为没有反射(reflect)在 DOM 中。即使状态没有被反射(reflect)，导航 typescript 文件中的 console.log() 也会被正确的数据触发，所以我知道 observable 正在工作。
非常感谢任何帮助!!!

Answer 1

由于您使用的是 AngularFireAuth ，您可以像这样简化您的服务:
服务:

摆脱主题 ( authStatusSub )

定义 user$直接来自 AngularFireAuth.authState

不要订阅服务!

所以代码可能是这样的:
服务:

constructor(private fireAuth: AngularFireAuth) { }

user$ = this.fireAuth.authState;

导航组件:

this.authService.user$.subscribe(
    userData => this.isAuthenticated = !!userData
);