Angular 5拦截器问题：拦截201响应后重发请求并返回新结果

我看了你的代码，问题主要出在两个地方：错误的返回值导致流混乱，以及没有处理重试请求的循环拦截。咱们一步步来修复：

问题分析 #

1. 错误的返回值：你在不需要处理的分支里返回了handled（也就是原请求的整个事件流），这会让mergeMap把原请求的事件重复发射一遍，不仅会导致组件接收到重复的响应，还会干扰新请求的执行逻辑。
2. 循环拦截风险：当你重新发起请求时，这个请求会再次经过当前拦截器，如果新请求又返回201，就会陷入无限循环。

修复后的代码 #

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

@Injectable()
export class AuthRetryInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService, private appService: AppService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 标记重试请求，避免循环拦截
    if (req.headers.has('X-Retry-Request')) {
      return next.handle(req);
    }

    return next.handle(req).pipe(
      mergeMap(event => {
        // 只处理成功的响应
        if (event instanceof HttpResponse && event.status === 201) {
          const lastUrlSegment = event.url.split('/').pop()?.toLowerCase();
          // 排除check接口
          if (lastUrlSegment !== 'check') {
            const newToken = event.headers.get('new_token');
            if (newToken) {
              // 更新token存储
              this.authService.updateAuthentication(newToken);
              
              // 克隆请求，更新headers并添加重试标记
              const updatedReq = req.clone({
                headers: this.appService.getHeaders().set('X-Retry-Request', 'true')
              });
              
              // 返回新请求的响应流，替换原201响应
              return next.handle(updatedReq);
            }
          }
        }
        // 非目标响应，直接返回原事件
        return of(event);
      })
    );
  }
}

关键修复点 #

• 用of(event)替代handled：确保每个事件只被发射一次，避免流重复导致的混乱。
• 添加重试标记头：给重新发起的请求加上X-Retry-Request自定义头，拦截器检测到这个头时直接放行，防止无限循环。
• 类型判断优化：用event instanceof HttpResponse替代event.type === HttpEventType.Response，代码更直观且类型安全。
• 空值安全处理：给pop()加上可选链?.，避免url格式异常时出现空指针错误。

这样修改后，当原请求返回201时，拦截器会先更新token，再重新发起带新请求头的重试请求，最终把重试请求的响应返回给组件，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Cédric Rémond