Angular v19中AuthInterceptor未触发，请求未添加accessToken求助

核心原因：DI类拦截器启用方式变更 #

Angular 14+引入函数式拦截器后，provideHttpClient()默认不再加载基于依赖注入（DI）的类拦截器，必须显式启用该功能才能让传统的HTTP_INTERCEPTORS提供商生效，这是拦截器未触发的最可能原因。

快速修复方案 #

修改app.config.ts中的provideHttpClient配置，添加withInterceptorsFromDi()以启用DI类拦截器支持：

export const appConfig: ApplicationConfig = {
  providers: [
    // 关键：添加withInterceptorsFromDi()启用DI类拦截器
    provideHttpClient(withInterceptorsFromDi()),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    importProvidersFrom(ReactiveFormsModule),
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
};

分步排查验证 #

• 确认拦截器是否被实例化：查看浏览器控制台是否输出AuthInterceptor constructed。若未输出，检查AuthService是否正确注册（需带有@Injectable({ providedIn: 'root' })或在app.config中配置）；若已输出但无AuthInterceptor triggered日志，确认请求是通过HttpClient发送（排除原生fetch等其他HTTP库）。
• 验证请求路径范围：确保ApiService中的请求通过HttpClient发起，拦截器会处理所有HttpClient请求，与域名无关。
• 检查accessToken有效性：确认localStorage.getItem('accessToken')能获取到有效值，若为null，拦截器不会添加Authorization头。

推荐：改用函数式拦截器（Angular 19官方推荐） #

若上述修复无效，建议迁移到函数式拦截器，避免DI配置冲突：

// auth.interceptor.ts
import { HttpInterceptorFn, HttpRequest, HttpHandlerFn, HttpErrorResponse } from '@angular/common/http';
import { inject } from '@angular/core';
import { catchError, switchMap, throwError } from 'rxjs';
import { AuthService } from './auth.service';
import { LoginResponse } from './types';

let isRefreshing = false;

export const authInterceptor: HttpInterceptorFn = (req: HttpRequest<any>, next: HttpHandlerFn) => {
  console.log('AuthInterceptor triggered');
  const accessToken = localStorage.getItem('accessToken');
  console.log('accessToken:', accessToken);

  if (accessToken) {
    req = req.clone({
      setHeaders: {
        Authorization: `Bearer ${accessToken}`
      }
    });
  }

  const authService = inject(AuthService);

  return next(req).pipe(
    catchError((error: HttpErrorResponse) => {
      if (error.status === 401 && !isRefreshing) {
        isRefreshing = true;
        return authService.refreshToken().pipe(
          switchMap((response: LoginResponse) => {
            isRefreshing = false;
            return next(req.clone({
              setHeaders: {
                Authorization: `Bearer ${response.accessToken}`
              }
            }));
          }),
          catchError(err => {
            isRefreshing = false;
            authService.logout();
            return throwError(() => err);
          })
        );
      }
      return throwError(() => error);
    })
  );
};

在app.config.ts中注册函数式拦截器：

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptors([authInterceptor])),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    importProvidersFrom(ReactiveFormsModule)
  ]
};

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