Angular 7登录失败时POST请求重复触发导致重试次数翻倍问题

我们基于Angular 7开发的登录页面配置了可自定义的最大重试次数，登录成功时功能正常，但登录失败时会出现单次失败触发两次登录API调用的情况，导致实际重试次数翻倍。例如配置允许6次重试，用户第3次尝试时账号就会被锁定，而非预期的6次。经排查代码中无手动重复调用逻辑，且HttpClient的错误回调仅在两次API调用完成后才触发。现咨询：为何登录API在返回400 Bad Request失败时会被调用两次？

提供的认证服务代码 #

authenticate(userName: string, password: string, authenticationType: string) {
    let url = `${this.authenticationServiceURL}api/login`;
    const un: string = userName;
    let currentUser = new AuthenticatedUser();
    currentUser.userName = userName;

    const encryptedPassword = this.encryptionService.encrypt(password, environment.encryptionKey);
    url += `?username=${un}`;
    url += `&password=${encodeURIComponent(encryptedPassword)}`;
    url += `&loginType=${authenticationType}`;

    const obj = {};

    return this.http.post(url, obj).pipe(
      map((result: AccessToken) => {
        if (result) {
          if (result.access_token) {
            currentUser = this.buildCurrentUserFromToken(result.access_token);
            this.currentUser = currentUser;
            sessionStorage.setItem('token', `${'Bearer '}${currentUser.token}`);
            localStorage.setItem(LocalStorageNames.CURRENTUSER, JSON.stringify(this.currentUser));
            return currentUser;
          }
        }
        return of(null);
      })
    );
  }

1. rxjs操作符误用（最可能的直接原因） #

代码中map操作符最后返回of(null)是错误的：

• map操作符的作用是同步转换Observable的每个值，只能返回普通值，而不是Observable。返回of(null)会让整个流变成高阶Observable（Observable<Observable<AuthenticatedUser>>），后续订阅时如果处理不当（比如框架自动展开或重复订阅），会间接触发额外的请求逻辑。

修复方式：
将return of(null)改为return null，让map返回普通值而非Observable：

// 替换前
return of(null);
// 替换后
return null;

2. 重复订阅Observable #

调用authenticate方法的地方可能存在重复订阅的情况：

• 比如模板中使用了async管道（如{{ authenticate(...) | async }}），同时组件代码里又手动调用了authenticate().subscribe(...)，这会导致每次触发请求时发起两次API调用。

排查方式：
检查所有调用authenticate的代码位置，确保同一Observable只被订阅一次；如果需要多地方使用，可以用shareReplay()操作符共享订阅结果：

return this.http.post(url, obj).pipe(
  map(...),
  shareReplay(1) // 添加此操作符共享订阅
);

3. 全局HTTP拦截器的自动重试 #

项目中可能存在自定义的HTTP拦截器（实现HttpInterceptor），其中包含针对400错误的重试逻辑，或者拦截器被重复注册。

排查方式：

• 查看app.module.ts或其他模块中是否注册了多个HTTP拦截器实例；
• 检查拦截器代码，确认是否对400错误做了自动重试处理，若有则调整重试条件（比如只针对特定错误码重试，或移除不必要的重试）。

4. 浏览器/框架的自动重试 #

部分浏览器或Angular的HttpClient在某些场景下会自动重试请求（比如网络波动，但400属于客户端错误通常不会触发），可以通过浏览器开发者工具的Network标签查看请求的Initiator字段，判断请求是由代码发起还是自动重试。

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