Angular拦截器中switchMap未执行代码问题求助

我在Angular拦截器里遇到switchMap代码不执行的问题，但相同逻辑放在Angular服务里运行正常，找不到原因，求解决。

getAccessToken函数代码 #

getAccessToken(): Observable<string> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' });
    
    const body = new HttpParams()
        .set('client_id', AppConfig.settings.ClientId)
        .set('client_secret', AppConfig.settings.ClientSecret);
    
    return this.http.post<{ access_token: string }>(AppConfig.settings.tokenURL, body.toString(), { headers }).pipe( map(response => response.access_token) );
}

拦截器代码 #

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      
    return this.authService.getAccessToken().pipe(
      switchMap(token => {
        const headers = new HttpHeaders({
          'Authorization': `Bearer ${token}`,
          'Accept': 'application/json'
        });
        const clonedRequest = req.clone({ headers });
        return next.handle(clonedRequest);
      })
    );
}

排查方向及解决办法 #

1. 拦截器循环调用死锁 #

拦截器会拦截所有HTTP请求，包括getAccessToken内部的token请求，导致无限循环：拦截器触发getAccessToken，getAccessToken的请求又被拦截器拦截，最终Observable无法正常订阅，switchMap自然不会执行。

解决： 在拦截器中跳过token请求的拦截：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 跳过token接口的拦截
  if (req.url.includes(AppConfig.settings.tokenURL)) {
    return next.handle(req);
  }

  return this.authService.getAccessToken().pipe(
    switchMap(token => {
      const headers = new HttpHeaders({
        'Authorization': `Bearer ${token}`,
        'Accept': 'application/json'
      });
      const clonedRequest = req.clone({ headers });
      return next.handle(clonedRequest);
    })
  );
}

2. 检查请求是否被触发/订阅 #

Angular HTTP请求是冷Observable，只有被订阅才会执行。可以给getAccessToken添加日志，确认请求是否触发、是否拿到响应：

getAccessToken(): Observable<string> {
  console.log('开始请求token');
  const headers = new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' });
  
  const body = new HttpParams()
      .set('client_id', AppConfig.settings.ClientId)
      .set('client_secret', AppConfig.settings.ClientSecret);
  
  return this.http.post<{ access_token: string }>(AppConfig.settings.tokenURL, body.toString(), { headers }).pipe( 
    map(response => {
      console.log('token请求返回:', response);
      return response.access_token;
    }),
    catchError(err => {
      console.error('token请求失败:', err);
      throw err;
    })
  );
}

3. 确认拦截器是否正确注册 #

检查app.module.ts中是否正确配置了拦截器，multi: true必须设置（允许多个拦截器）：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { YourInterceptorClass } from './path-to-your-interceptor';

@NgModule({
  // ...其他配置
  providers: [
    { 
      provide: HTTP_INTERCEPTORS, 
      useClass: YourInterceptorClass, 
      multi: true 
    }
  ]
})
export class AppModule { }

4. 处理错误流避免中断 #

如果getAccessToken请求出错，Observable会进入错误流，switchMap不会执行。添加错误处理，保证流的完整性：

return this.authService.getAccessToken().pipe(
  switchMap(token => {
    const headers = new HttpHeaders({
      'Authorization': `Bearer ${token}`,
      'Accept': 'application/json'
    });
    const clonedRequest = req.clone({ headers });
    return next.handle(clonedRequest);
  }),
  catchError(err => {
    console.error('获取token失败，直接放行原请求:', err);
    return next.handle(req);
  })
);

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