Angular7+AngularFire2认证后视图未更新问题排查

看起来你遇到的核心问题是认证状态的变化没有被正确监听，导致视图无法自动更新，同时代码里还有几处关键的遗漏，我来一步步帮你梳理：

关键问题点 #

1. 认证服务没有暴露用户状态的Observable
   你的AuthenticateService里没有把AngularFireAuth提供的用户状态Observable暴露出来，app.component.html里的authService.user其实是一个未定义的属性，async pipe根本无法监听它的变化。

2. 登录条件判断逻辑不一致
   你在app.component.html里用了两个矛盾的判断：

   • <app-login *ngIf="!authService.user">：这里判断的是authService是否有user这个属性，而不是用户是否未登录
   • <div *ngIf="(authService.user | async) as user">：这里又把user当作Observable来用，逻辑完全不统一

3. 异步登录操作未处理
   signInWithEmailAndPassword是异步Promise操作，你现在只是调用了它，但既没有处理成功后的状态，也没有捕获可能的错误，万一登录失败（比如密码错误）你也没法知道。

修复步骤 #

1. 更新认证服务，暴露用户状态Observable #

修改authenticate.service.ts，把AngularFireAuth的authState Observable暴露出来，这样组件就能监听认证状态的实时变化：

import { Injectable } from "@angular/core";
import { AngularFireAuth } from "@angular/fire/auth";
import { auth } from "firebase/app";
import { Observable } from "rxjs";

@Injectable({ providedIn: "root" })
export class AuthenticateService {
  // 暴露用户状态的Observable，供组件监听
  user: Observable<auth.User | null>;

  constructor(private afAuth: AngularFireAuth) {
    // 初始化user，绑定到AngularFire的认证状态流
    this.user = this.afAuth.authState;
  }

  // 返回Promise，方便组件处理登录结果
  signinUser(email: string, password: string): Promise<auth.UserCredential> {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .catch(error => {
        // 捕获登录错误，可在这里统一处理或抛给组件
        console.error("登录失败:", error.message);
        throw error;
      });
  }
}

2. 统一app.component的视图判断逻辑 #

修改app.component.html，让两个*ngIf都基于同一个Observable判断，确保逻辑一致：

<!-- 未登录时显示登录组件 -->
<app-login *ngIf="!(authService.user | async)"></app-login>

<!-- 已登录时显示主内容区 -->
<div class="container-fluid" *ngIf="(authService.user | async) as user">
 <div class="row">
 <!-- navigation sidebar -->
 <div class="col-2 pt-5" id="sideNav">
 <app-navbar></app-navbar>
 </div>
 <!-- main content area -->
 <main class="col-10 offset-2">
 <router-outlet></router-outlet>
 </main>
 </div>
</div>

3. 处理登录组件的异步操作 #

修改login.component.ts，用async/await（或.then().catch()）处理登录的异步结果，同时可以添加错误提示：

import { NgForm } from "@angular/forms";
import { Component, OnInit } from "@angular/core";
import { AuthenticateService } from "../services/authenticate.service";
import { Router } from "@angular/router";

@Component({
 selector: "app-login",
 templateUrl: "./login.component.html",
 styleUrls: ["./login.component.css"]
})
export class LoginComponent implements OnInit {
  loginError: string = ''; // 用于显示登录错误信息

 constructor(private authService: AuthenticateService, private router: Router) {}

 ngOnInit() {}

 async tryLogin(loginForm: NgForm) {
   this.loginError = ''; // 清空之前的错误
   const { email, password } = loginForm.value;

   try {
     // 等待登录完成
     await this.authService.signinUser(email, password);
     // 登录成功后可跳转到首页（可选）
     this.router.navigate(['/']);
   } catch (error) {
     // 捕获错误并显示给用户
     this.loginError = error.message;
     console.error("登录失败:", error);
   }
 }
}

额外注意事项 #

• 确保你已经在AppModule中正确导入了AngularFireAuthModule，否则AngularFire的认证功能无法正常工作
• 如果需要登出功能，可以在AuthenticateService里添加signOut()方法：

  signOut(): Promise<void> {
    return this.afAuth.auth.signOut();
  }
  

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