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

Question

我正在使用 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 中。即使未反映状态，nav typescript 文件中的 console.log() 也会使用正确的数据触发，因此我知道 observable 正在运行。

非常感谢任何帮助！！！

Answer 1

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

服务：

删除主题 (authStatusSub)
直接从AngularFireAuth.authState

user$

不要订阅服务！

因此代码可能如下所示：

服务：

constructor(private fireAuth: AngularFireAuth) { }

user$ = this.fireAuth.authState;

导航组件：

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

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

Angular Firebase ngIf user is authenticated listener doesn't work on page reload

angular

firebase

observable

angularfire2

angular2-observables