Angular/fire authState.subscribe 不响应注销答案

【问题标题】：Angular/fire authState.subscribe not respond to logoutAngular/fire authState.subscribe 不响应注销
【发布时间】：2019-07-18 21:48:05
【问题描述】：

我是 Angular 新手，我正在尝试使用 firebase 进行身份验证。我已经建立了登录/注册和注销。它现在工作正常，但现在我想显示一个导航栏（一个完全独立的组件），它有一个登录按钮和注销按钮。我需要根据用户的 authState 切换这些按钮。所以我在 authState 上使用了订阅。但它只在用户登录时起作用。在用户注销时它不会触发。用户注销时应该返回null吗？我检查了 authService 中的 authState，用户注销后它为空。那么我在这里做错了什么？

这是我的代码。

auth.service.ts

    import { Injectable } from '@angular/core';
    import { AngularFirestore } from '@angular/fire/firestore';
    import { AngularFireAuth } from '@angular/fire/auth';
    import { Observable, of } from 'rxjs';
    import * as firebase from 'firebase/app';
    
    @Injectable({
      providedIn: 'root'
    })
    
    export class AuthService {
      authState: any;
    
      constructor(
        public db: AngularFirestore,
        public mAuth: AngularFireAuth
      ) {}
    
      getAuthState() {
        return this.mAuth.authState;
      }
      doLogout() {
        return new Promise((resolve, reject) => {
          if (firebase.auth().currentUser) {
            this.mAuth.auth.signOut();
            resolve();
          } else {
            reject();
          }
        });
      }

    /* login, register, etc... */

    }

nav.component.ts

    import { Component, OnInit } from '@angular/core';
    import { AuthService } from 'src/app/auth/auth.service';
    import { Router } from '@angular/router';
    import * as firebase from 'firebase/app';
    
    @Component({
      selector: 'app-navbar',
      templateUrl: './navbar.component.html',
      styleUrls: ['./navbar.component.scss']
    })
    export class NavbarComponent implements OnInit {
    
      user: any;
    
      constructor(
        private authService: AuthService,
        private router: Router) {}
    
      ngOnInit() {
        this.authService.getAuthState().subscribe( user => {
          /* this doesn't respond to logout ... */
          console.log(user);
          this.user = user;
        });
      }
      tryLogout() {
        this.authService.doLogout()
          .then(res => {
            console.log('tryLogout', res);
            this.router.navigate(['/login']);
          }, err => console.log(err));
      }
    }

【问题讨论】：

你能在 Stackblitz 上重现它吗？ authState 应该在注销时发出一个值。
stackblitz.com/edit/… 看看这个。登录示例：asdf@asf.com asdfasdf

标签： angular firebase firebase-authentication angularfire

【解决方案1】：

我很确定您的 authService doLogout() 正在返回一个承诺的承诺。

auth.signout() 已经返回了一个承诺。

我认为您的doLogout() 函数应该是：

return this.mAuth.auth.signout()

旁注：我遇到了同样的问题，这是因为 authstate 在某种程度上受到router.navigate 的影响。我的错误是：

this.authstate.signout();
this.router.navigate(['/']);

但是使用上面的代码，authstate 永远不会真正改变。解决问题的是：

this.authstate.signout().then(this.router.navigate(['/'])

【讨论】：

【解决方案2】：

两者之间有区别：

authState.subscribe((user: any) => {
  if (user) {
    // logged in
  }
});

和

onAuthStateChanged((user: any) => {
  if (user) {
    // logged in
  }
});

因为后者会在注销后返回正确的状态...

【讨论】：