Angular 17中HTTP Interceptor未触发问题排查求助

问题描述 #

在Angular 17应用中实现了为HTTP请求添加认证Token的拦截器，但拦截器在请求时并未触发。已完成拦截器的模块注册，且验证触发场景下不存在No-Auth请求头，但问题依然存在。

拦截器代码 #

import { HttpInterceptorFn } from '@angular/common/http';

export const TokenInterceptor: HttpInterceptorFn = (req, next) => {
  
    if (req.headers.get('No-Auth') == 'True') {
    return next(req);
  }

  if (typeof window !== 'undefined') {
    const authToken = localStorage.getItem('authToken');

    if (!authToken) {
      //TODO redirection vers la page d'authentification
    }

    const authReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${authToken}`,
      },
    });

    return next(authReq);
  }
  return next(req);
}

模块注册代码 #

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { TokenInterceptor } from '../domain/services/interceptor-token.service'; 

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withComponentInputBinding()), 
    provideClientHydration(), 
    provideHttpClient(withInterceptors([TokenInterceptor]))
  ]
}

已尝试操作 #

• 在Angular 17中实现认证Token拦截器
• 完成拦截器的模块注册并确认其在providers列表中
• 验证触发请求的场景下不存在No-Auth请求头

预期效果 #

拦截器在HTTP请求触发时自动执行，从localStorage获取认证Token并添加到请求头的Authorization字段中，保障请求安全性。

问题现象 #

拦截器未在HTTP请求时触发，请求头中未添加预期的Authorization字段。

可能成因及排查建议 #

1. HTTP请求未使用Angular HttpClient #

拦截器仅对Angular官方的HttpClient发起的请求生效，如果使用原生fetch API或其他第三方请求库，拦截器不会触发。请确认所有请求均通过HttpClient发送。

2. SSR环境导致window判断跳过逻辑 #

代码中通过typeof window !== 'undefined'判断浏览器环境，但在Angular 17的服务器端渲染（SSR）场景下，首次请求会在服务器执行，此时window不存在，拦截器会直接返回原请求。若需兼容SSR，建议使用Angular官方的平台判断方式：

import { HttpInterceptorFn } from '@angular/common/http';
import { inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

export const TokenInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.headers.get('No-Auth') === 'True') {
    return next(req);
  }

  const platformId = inject(PLATFORM_ID);
  if (isPlatformBrowser(platformId)) {
    const authToken = localStorage.getItem('authToken');
    if (!authToken) {
      // TODO 跳转到认证页面
    }
    const authReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${authToken}`,
      },
    });
    return next(authReq);
  }
  return next(req);
}

3. 拦截器未被正确加载 #

检查main.ts中是否正确传入了appConfig：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

确保独立组件模式下appConfig被正确应用到启动配置中。

4. 调试验证拦截器是否真的未触发 #

在拦截器开头添加日志输出，确认拦截器是否被调用：

export const TokenInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('Token拦截器已触发，请求URL:', req.url); // 添加调试日志
  // ... 原有逻辑
}

查看浏览器控制台是否有该日志，判断拦截器是未触发还是逻辑分支跳过了Token添加。

5. 请求头No-Auth的大小写问题 #

代码中判断req.headers.get('No-Auth') == 'True'（首字母大写），如果实际请求头中是'true'小写，会导致逻辑跳过。建议统一大小写判断：

if (req.headers.get('No-Auth')?.toLowerCase() === 'true') {
  return next(req);
}

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