Angular多HTTP拦截器next.handle(request)调用失败：返回undefined

你的报错核心问题完全出在JwtInterceptor中，和拦截器的注册顺序无关（不过顺便提一句：通常建议把JWT拦截器放在错误拦截器之前，这样错误拦截器能捕获JWT处理后的请求错误，但这不是当前报错的原因）。

看你的JwtInterceptor代码，authenticatedUser.getSession()是基于回调的异步操作，你在回调函数里才调用next.handle(request)并返回，但外层的intercept方法没有返回任何有效的Observable——当authenticatedUser不为null时，外层函数直接结束返回undefined；当authenticatedUser为null时，你直接return也没有返回next.handle(request)的流。这就导致整个拦截器链拿到的是undefined，错误拦截器调用.pipe()自然会抛出Cannot read property 'pipe' of undefined的错误。

修复方案：将回调式异步操作包装为Observable #

你需要把getSession的回调逻辑包装成Observable，确保intercept方法始终返回一个有效的Observable<HttpEvent<any>>。修改后的JwtInterceptor代码如下：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '@environments/environment';
import { AuthorizationService } from 'src/shared/authorization.service';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  constructor(private auth: AuthorizationService) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authenticatedUser = this.auth.getAuthenticatedUser();
    // 如果没有认证用户，直接传递请求到下一个拦截器
    if (!authenticatedUser) {
      return next.handle(request);
    }

    // 将基于回调的getSession包装成Observable
    return new Observable<HttpEvent<any>>(observer => {
      authenticatedUser.getSession((err, session) => {
        if (err) {
          console.log(err);
          // 将错误传递到下游流中
          observer.error(err);
          observer.complete();
          return;
        }

        const isApiUrl = request.url.startsWith(environment.apiUrl);
        const token = session.getIdToken().getJwtToken();
        
        // 仅当用户已登录且请求指向API地址时，添加Authorization头
        if (this.auth.isLoggedIn() && isApiUrl) {
          request = request.clone({
            setHeaders: {
              Authorization: token,
            }
          });
        }

        // 继续处理请求，并将结果传递到当前Observable
        next.handle(request).subscribe({
          next: event => observer.next(event),
          error: err => observer.error(err),
          complete: () => observer.complete()
        });
      });
    });
  }
}

关键修改点说明： #

1. 兜底返回流：当authenticatedUser为null时，不再直接return，而是返回next.handle(request)，确保请求能继续在拦截器链中传递。
2. 包装异步操作：把getSession的回调逻辑封装进Observable，让整个intercept方法始终返回有效的流，保证拦截器链能正常工作。
3. 错误传递：处理getSession的错误情况，确保错误能被下游的错误拦截器捕获。

另外建议调整app.module里的拦截器注册顺序，让JWT拦截器先执行：

{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }

这样修改后，两个拦截器就能正常协同工作，不会再出现undefined相关的错误了。

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