Angular 17中拦截器无法生效的问题排查求助

问题根源 #

你的LoginComponent中导入了HttpClientModule，在Angular 17的独立组件模式下，这会导致组件创建一个独立的HttpClient实例，完全绕过app.config.ts里通过provideHttpClient(withInterceptors(...))配置的全局实例，自然拦截器不会作用于这个组件发起的HTTP请求。

修复步骤 #

1. 移除LoginComponent中的HttpClientModule导入
   直接修改组件的imports数组，删掉HttpClientModule即可：

   imports: [CommonModule, ReactiveFormsModule],
   

2. 添加日志验证拦截器触发（可选）
   在拦截器里加一行日志，方便确认拦截器是否正常工作：

   export const demoInterceptor: HttpInterceptorFn = (req, next) => {
     console.log('拦截器已触发，请求URL：', req.url); // 新增日志
     const authToken = localStorage.getItem("token");
   
     const authReq = req.clone({
       setHeaders: {
         Authorization: `Bearer ${authToken}`
       }
     });
   
     return next(authReq);
   };
   

3. 确认Token存储正常
   提交表单后，打开浏览器开发者工具的Application面板，检查localStorage里是否存在token键值对，确保localStorage.setItem执行成功。

修正后的完整代码 #

LoginComponent.ts

import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss'
})
export class LoginComponent {

  loginForm: FormGroup;

  constructor(private formBuilder: FormBuilder, private http: HttpClient) {
    this.loginForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

  onSubmit() {
    if (this.loginForm.valid) {
      localStorage.setItem("token", "test1234")
      this.http.post('https://jsonplaceholder.typicode.com/posts', this.loginForm.value)
        .subscribe(
          response => {
            console.log('Login successful', response);
          },
          error => {
            console.error('Login error', error);
          }
        );
    } else {
      console.log('Form is invalid');
    }
  }
}

app.config.ts（无需修改）

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

import { routes } from './app.routes';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { demoInterceptor } from './demo.interceptor';
import { provideClientHydration } from '@angular/platform-browser';

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

demo.interceptor.ts（带日志版）

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

export const demoInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('拦截器已触发，请求URL：', req.url);
  const authToken = localStorage.getItem("token");

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

  return next(authReq);
};

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