Angular 16中HttpClient POST请求延迟致JWT登录异常排查

异常场景 #

• 输入正确凭证首次登录失败，再次尝试则成功；
• 输入错误凭证首次登录失败，再次尝试仍失败；
• 输入正确凭证首次登录失败，再次输入错误凭证却登录成功。

问题说明 #

登录成功与否依赖localStorage中存储的JWT Token，API调用最终能成功，但验证时机存在问题。

相关代码 #

AuthService代码 #

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { User } from 'src/app/models/User';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':'application/json;charset=UTF-8'
  })
}

@Injectable({
  providedIn: 'root'
})
export class AuthService{

  public loggedIn = false;

  constructor(private httpClient:HttpClient) { }

  login(user: User){
    const body = JSON.stringify(user);
    this.httpClient.post<any>("https://localhost:7054/login", body, httpOptions)
    .subscribe(data => {
      localStorage.setItem("token", data.token);
    });
  }
}

HomeComponent.ts代码 #

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthResponse } from 'src/app/models/AuthResponse';
import { User } from 'src/app/models/User';
import Swal from "sweetalert2";
import { AuthService } from 'src/app/services/auth/auth.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent {
  user: User = new User();

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

  token: AuthResponse = new AuthResponse();

  login(username: string, password: string) {
    if(username != "" || password != ""){
      let user = new User();
      user.email = username;
      user.pass = password;

      this.authService.login(user);
      
      if(localStorage.getItem("token")){
        this.router.navigate(['/home']);
      }
      else{
        this.sendError("Credentials are incorrect.")
        localStorage.setItem("token", "");
      }
    }
    else{
      this.sendError("Please type your credentials.")
      localStorage.setItem("token", "");
    }
  }

  sendError(error:string){
    Swal.fire({
      icon: 'error',
      title: 'Error',
      text: error,
    })
  }
}

已尝试方案 #

使用拦截器处理响应、强制Token验证，均未解决问题。

核心问题：异步操作的同步判断错误 #

Angular的HttpClient.post是异步操作，调用this.authService.login(user)后，代码会立刻执行后续的localStorage.getItem("token")判断，此时API请求还未完成，localStorage里还没有新的Token。

这直接导致了所有异常场景：

1. 首次正确登录时，判断逻辑先于API响应执行，没读到Token进入错误分支；等API响应回来存入Token后，第二次登录读取到的是上次的有效Token，所以成功。
2. 错误凭证登录时，API返回空Token，判断时没读到进入错误分支；后续API响应存入空Token，第二次判断仍为空，所以失败。
3. 正确凭证首次登录后，API响应存入了有效Token；此时输入错误凭证，调用login后立刻判断，读取到的是上次的有效Token，所以错误凭证反而登录成功。

解决方案：将AuthService的login改为返回Observable，在组件中订阅处理 #

修改AuthService的login方法 #

import { Observable } from 'rxjs';

// ... 其余代码不变 ...

login(user: User): Observable<any> {
  const body = JSON.stringify(user);
  // 返回Observable，由组件订阅处理结果
  return this.httpClient.post<any>("https://localhost:7054/login", body, httpOptions);
}

修改HomeComponent的login方法 #

login(username: string, password: string) {
  // 修正空值判断逻辑：两个字段都不为空才进入
  if(username.trim() !== "" && password.trim() !== ""){
    let user = new User();
    user.email = username;
    user.pass = password;

    // 订阅login的Observable，等待API响应后再处理逻辑
    this.authService.login(user).subscribe({
      next: (data) => {
        localStorage.setItem("token", data.token);
        if(data.token){ // 直接判断返回的token是否有效
          this.router.navigate(['/home']);
        } else {
          this.sendError("Credentials are incorrect.");
          localStorage.setItem("token", "");
        }
      },
      error: () => { // 处理API返回的错误状态（比如400 Bad Request）
        this.sendError("Credentials are incorrect.");
        localStorage.setItem("token", "");
      }
    });
  } else {
    this.sendError("Please type your credentials.");
    localStorage.setItem("token", "");
  }
}

额外优化点 #

1. 修正了原组件中空值判断的逻辑错误，原逻辑用||会导致单个字段不为空就进入处理，改为&&确保两个字段都有值。
2. 直接使用API返回的data.token判断有效性，比依赖localStorage更及时准确。
3. 增加error回调处理API返回的错误状态，避免遗漏后端返回的错误场景。

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