Angular JWT认证：AuthService订阅登录后如何通知组件结果

1. 改造AuthService，添加状态通知机制 #

在AuthService中引入RxJS的Subject，用来传递登录成功/失败的状态。这样既能在服务内部保存token，又能把结果同步给组件。

修改后的AuthService代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  
  authToken: string | undefined;
  // 创建Subject发射登录状态：包含成功标识和可选错误信息
  private loginStatus$ = new Subject<{success: boolean, error?: string}>();

  constructor(private http: HttpClient) { }

  // 暴露给组件的可观察对象，限制组件仅能订阅不能修改状态
  getLoginStatus(): Observable<{success: boolean, error?: string}> {
    return this.loginStatus$.asObservable();
  }

  login(email: string, password: string){
    this.http
      .post<string>(
        'http://localhost:8080/api/v1/auth/login',
        {email: email, password: password}
      )
      .subscribe({
        next: (token) => {
          this.authToken = token;
          // 发射登录成功状态
          this.loginStatus$.next({success: true});
        },
        error: (err) => {
          // 发射登录失败状态，附带错误信息
          this.loginStatus$.next({success: false, error: err.message || '登录失败'});
        }
      });
  }
}

2. 修改LoginComponent，订阅登录状态 #

在组件中订阅AuthService的状态流，根据结果处理页面跳转或错误提示，同时要在组件销毁时取消订阅避免内存泄漏。

修改后的LoginComponent代码：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { NgForm } from '@angular/forms';';
import { AuthService } from '../auth.service'; // 根据实际路径调整
import { Subscription } from 'rxjs';
import { Router } from '@angular/router'; // 引入Router实现页面跳转

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, OnDestroy{
  authenticated = false;
  loginError: string | undefined;
  private loginStatusSub!: Subscription;

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

  ngOnInit() {
    // 订阅登录状态变化
    this.loginStatusSub = this.authService.getLoginStatus().subscribe(status => {
      if (status.success) {
        // 登录成功，跳转到首页
        this.router.navigate(['/']);
        this.authenticated = true;
        this.loginError = undefined;
      } else {
        // 登录失败，显示错误信息
        this.authenticated = false;
        this.loginError = status.error;
      }
    });
  }

  login(loginForm: NgForm) {
    if (!loginForm.valid) return;
    const email = loginForm.form.value.email;
    const password = loginForm.form.value.password;
    this.authService.login(email, password);
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，防止内存泄漏
    this.loginStatusSub.unsubscribe();
  }
}

关键逻辑说明 #

• Subject的作用：作为服务与组件间的事件桥梁，服务内部控制状态发射，组件仅通过订阅接收通知，保证状态流转的可控性。
• asObservable()的意义：将Subject转为普通Observable，避免组件直接调用next()修改状态，确保状态只能由AuthService管理。
• 错误处理：在HTTP请求的error回调中传递失败状态，组件可直接获取错误信息展示给用户。
• 内存泄漏防护：组件销毁时必须取消订阅，否则订阅会一直占用资源。

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