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

问题描述

我正在使用 firebase 中的 onAuthStateChanged 来监听用户的身份验证状态。我正在聆听导航组件中的这些更改，以决定是显示登录按钮还是注销按钮等。

如果我在应用程序中导航，这会正常工作，但是当我刷新页面时，即使订阅被触发，DOM 也会反映用户的状态。

可能是我忽略的一个简单修复，但我一直无法找到适用于我的研究的修复并且投入了太多时间 -_- 请帮忙！

这是我的 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');
      }
    });
  }

导航打字稿文件：

  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>

当我完成正常的应用程序流程并登录、注销并导航到主页（导航栏所在的位置）时，它按预期工作，但是当我刷新主页（导航栏所在的位置）时，状态未反映在 DOM 中。即使状态没有被反映，导航打字稿文件中的 console.log() 也会被正确的数据触发，所以我知道 observable 正在工作。

非常感谢您的帮助！！！

解决方法

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

服务：

• 去掉主题 (authStatusSub)
• 直接从 user$ 定义 AngularFireAuth.authState
• 不要订阅服务！

所以代码看起来像这样：

服务：

constructor(private fireAuth: AngularFireAuth) { }

user$ = this.fireAuth.authState;

导航组件：

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