Angular 10中BehaviorSubject返回双值：登录错误状态获取异常

看起来你遇到的问题是因为重复订阅错误状态流和BehaviorSubject的初始值特性导致的，下面来一步步拆解并解决：

问题根源分析 #

1. 重复订阅：每次点击signIn按钮时，你都调用了this.authenticationService.getValueError().subscribe(...)，这会创建一个新的订阅。如果多次点击，旧的订阅不会自动取消，导致同一个错误状态会被多个订阅触发多次。
2. BehaviorSubject的初始值：假设isError是一个BehaviorSubject（从代码逻辑看应该是），它的特性是订阅时会立即发送当前的最新值。你的初始值应该是false，所以每次订阅都会先收到false，当登录出错时又收到true，这就是为什么alert会弹出两个值。

修正方案 #

第一步：优化Auth服务 #

确保错误状态的管理更严谨，同时提供重置状态的方法：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Router } from '@angular/router';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
  // 初始化BehaviorSubject为false，代表初始无错误
  private isError = new BehaviorSubject<boolean>(false);

  constructor(
    public angularFireAuth: AngularFireAuth,
    private router: Router
  ) {}

  SignIn(email: string, password: string) {
    this.angularFireAuth
      .signInWithEmailAndPassword(email, password)
      .then(res => {
        console.log('Connected OK');
        this.isError.next(false); // 成功登录时重置错误状态
        this.router.navigate(['/user']);
      })
      .catch(err => {
        console.log('Erreur:', err.message);
        this.isError.next(true); // 触发错误状态
      });
  }

  getValueError(): Observable<boolean> {
    return this.isError.asObservable();
  }

  // 新增重置错误状态的方法，方便组件手动重置
  resetErrorState(): void {
    this.isError.next(false);
  }
}

第二步：调整登录组件的订阅逻辑 #

不要每次点击都订阅，而是在组件初始化时订阅一次，并管理好订阅的生命周期（防止内存泄漏）：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AuthenticationService } from './authentication.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit, OnDestroy {
  email = '';
  password = '';
  // 用于管理订阅销毁的Subject
  private destroy$ = new Subject<void>();

  constructor(private authenticationService: AuthenticationService) {}

  ngOnInit(): void {
    // 在组件初始化时只订阅一次错误状态流
    this.authenticationService.getValueError()
      .pipe(takeUntil(this.destroy$)) // 组件销毁时自动取消订阅
      .subscribe(isError => {
        // 只在错误状态为true时触发提示
        if (isError) {
          alert('登录失败，请检查邮箱或密码是否正确！');
          // 提示后重置错误状态，避免下次登录时残留状态
          this.authenticationService.resetErrorState();
        }
      });
  }

  signIn() {
    // 登录前先重置错误状态，避免上次的错误影响本次操作
    this.authenticationService.resetErrorState();
    this.authenticationService.SignIn(this.email, this.password);
    this.email = '';
    this.password = '';
  }

  ngOnDestroy(): void {
    // 组件销毁时通知所有订阅取消
    this.destroy$.next();
    this.destroy$.complete();
  }
}

进阶优化：使用Async管道（推荐） #

Angular的Async管道可以自动管理订阅和取消订阅，让代码更简洁：

在组件中定义一个可观察对象：

import { Component } from '@angular/core';
import { AuthenticationService } from './authentication.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  email = '';
  password = '';
  // 直接暴露错误状态的可观察对象
  loginError$: Observable<boolean>;

  constructor(private authenticationService: AuthenticationService) {
    this.loginError$ = this.authenticationService.getValueError();
  }

  signIn() {
    this.authenticationService.resetErrorState();
    this.authenticationService.SignIn(this.email, this.password);
    this.email = '';
    this.password = '';
  }
}

然后在模板中使用Async管道绑定，同时处理错误提示：

<!-- 错误提示组件 -->
<div *ngIf="loginError$ | async" class="error-alert">
  登录失败，请检查邮箱或密码是否正确！
</div>

<!-- 登录表单 -->
<input type="email" [(ngModel)]="email" placeholder="邮箱">
<input type="password" [(ngModel)]="password" placeholder="密码">
<button (click)="signIn()">登录</button>

这样就完全不用手动管理订阅，代码更简洁也更符合Angular的最佳实践。

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