Angular与Spring Boot（Spring Security）：服务http.post调用的.subscribe()方法异常排查问询

嘿，我看了你遇到的问题，大概率是一个新手常踩的表单默认行为坑，先给你梳理下排查和解决步骤：

首先解决最核心的问题：表单默认提交导致请求中断 #

你的登录按钮是type="submit"，点击后浏览器会触发默认的表单提交行为，直接刷新页面——这就导致Angular的HTTP请求订阅还没来得及执行next和complete回调，页面就重载了，所以你永远看不到"Hello"和"Completed"的提示；而" No User found"偶尔弹出，是因为刚好在页面刷新前，后端的401响应已经返回，回调侥幸执行了一次，看起来就像“随机触发”。

解决方法三选一： #

1. 修改按钮类型为button（最直接）：

<input class="authSubmit" type="button" id="submitLogin" name="submitLogin" value="Log in" 
       (click)="handleLogin(username.value, password.value)">

2. 在点击事件里阻止默认行为：

<input class="authSubmit" type="submit" id="submitLogin" name="submitLogin" value="Log in" 
       (click)="handleLogin(username.value, password.value); $event.preventDefault()">

3. 在组件方法里手动阻止事件：
   先修改html传递事件对象：

(click)="handleLogin(username.value, password.value, $event)"

再修改组件代码：

handleLogin(username: string, password: string, event: Event) {
    event.preventDefault(); // 阻止表单默认提交
    const loginRequest: LoginRequest = {
        userCredential: username,
        password: password
    }
    this.userService.logIn(loginRequest).subscribe(
        (user: User) => { window.alert("Hello") },
        (error: HttpErrorResponse) => { window.alert("No User found") },
        () => { window.alert("Completed") }
    )
}

后续排查（如果阻止默认行为后仍有问题） #

1. 检查响应解析是否正常
   把subscribe里的alert换成console.log，看看实际拿到的响应数据：

this.userService.logIn(loginRequest).subscribe(
    (user: User) => { console.log("返回的用户数据：", user); window.alert("Hello") },
    (error: HttpErrorResponse) => { console.log("错误详情：", error); window.alert("No User found") },
    () => { console.log("请求完成"); window.alert("Completed") }
)

你可以确认后端返回的User对象是否和Angular的User接口结构完全匹配，虽然你说GET请求正常，但还是可以排除下字段解析问题。

2. 添加HTTP日志拦截器排查请求细节
   创建一个日志拦截器，打印完整的请求和响应信息，方便定位问题：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    console.log('发送的请求：', request);
    return next.handle(request).pipe(
      tap(
        event => console.log('收到的响应：', event),
        error => console.log('响应错误：', error)
      )
    );
  }
}

然后在AppModule的providers里注册：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
// ...
providers: [
  { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }
]

这样就能在浏览器控制台看到完整的请求/响应细节，确认后端返回的状态码、数据是否符合预期。

先试试阻止表单默认提交的办法，这应该能解决你90%的问题，毕竟页面刷新中断请求是新手开发登录功能时最常见的坑。

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