Angular HTTPInterceptor未生效：请求未携带JWT授权头问题排查

问题现象 #

开发Angular应用调用ASP.NET Core Web API时，已配置HTTP拦截器但完全未生效：

• 调用getMe()接口返回401 Unauthorized错误
• 拦截器未为请求添加Authorization头
• 浏览器Sources面板中找不到该拦截器，添加console.log也无输出
• Swagger测试getMe()接口正常，注册、登录接口工作正常，排除后端及跨域问题

相关代码 #

auth.interceptor.ts #

@Injectable({ providedIn: 'root' }) 
export class AuthInterceptor implements HttpInterceptor { 
  intercept( req: HttpRequest<any>, next: HttpHandler ): Observable<HttpEvent<any>> { 
    const token = localStorage.getItem('authToken'); 
    if (token) { 
      req = req.clone({ 
        headers: req.headers.append('Authorization', `Bearer ${token}`), 
      }); 
    } 
    return next.handle(req); 
  } 
}

AuthService.ts #

@Injectable({ providedIn: 'root', }) 
export class AuthService { 
  constructor(private http: HttpClient) {} 

  public Register(user: User): Observable<any> { 
    return this.http.post<any>( 'https://localhost:7272/api/Auth/register', user ); 
  } 

  public Login(user: User): Observable<string> { 
    return this.http.post('https://localhost:7272/api/Auth/login', user, { responseType: 'text', }); 
  } 

  public getMe(): Observable<string> { 
    return this.http.get('https://localhost:7272/api/Auth', { responseType: 'text', withCredentials: true }); 
  } 
}

app.component.ts #

@Component({ 
  selector: 'app-root', 
  standalone: true, 
  imports: [CommonModule, RouterOutlet, HeaderComponent, MainMenuComponent, RouterLink, RouterLinkActive, FormsModule ], 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'], 
}) 
export class AppComponent { 
  title = 'untitled'; 
  user = new User(); 

  constructor(private authService: AuthService) { } 

  register(user: User) { 
    this.authService.Register(user).subscribe(); 
  } 

  login(user: User) { 
    this.authService.Login(user).subscribe((token: string) => { localStorage.setItem('authToken', token) }); 
  } 

  getme() { 
    this.authService.getMe().subscribe((name: string) => { console.log(name); }); 
  } 
}

app.module.ts #

@NgModule({ 
  declarations: [ ], 
  imports: [ HttpClientModule, FormsModule, BrowserModule, AppRoutingModule, NgxMaskDirective, NgxMaskPipe, ], 
  bootstrap: [AppComponent], 
  providers: [ 
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }, 
    provideNgxMask(), 
  ] 
}) 
export class AppModule{}

后端代码 #

UserService.cs

public class UserService : IUserService { 
  private readonly IHttpContextAccessor _httpContextAccessor; 

  public UserService(IHttpContextAccessor httpContextAccessor) { 
    _httpContextAccessor = httpContextAccessor; 
  } 

  public string GetMyName() { 
    var result = string.Empty; 
    if (_httpContextAccessor.HttpContext != null) { 
      result = _httpContextAccessor.HttpContext.User.FindFirstValue(ClaimTypes.Name); 
    } 
    return result; 
  } 
}

AuthController.cs

[Route("api/[controller]")] 
[ApiController] 
public class AuthController : ControllerBase { 
  public static User user = new User(); 
  private readonly IConfiguration _configuration; 
  private readonly IUserService _userService; 

  public AuthController(IConfiguration configuration, IUserService userService) { 
    _configuration = configuration; 
    _userService = userService; 
  } 

  [HttpGet, Authorize] 
  public ActionResult<string> GetMe() { 
    var userName = _userService.GetMyName(); 
    return Ok(userName); 
  }
}

已尝试的解决方案 #

• 前后端配置允许凭证
• 移除provideHttpClient()

解决方案 #

核心问题：独立组件与NgModule的HttpClient冲突 #

你的AppComponent是独立组件（standalone: true），但拦截器是在AppModule中配置的。Angular 14+的独立组件默认会使用自身的HttpClient实例，不会继承NgModule中配置的拦截器。

修复步骤 #

方案1：在独立组件中直接配置拦截器

修改AppComponent的providers数组，注入拦截器：

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, HeaderComponent, MainMenuComponent, RouterLink, RouterLinkActive, FormsModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppComponent {
  // ... 原有代码
}

方案2：统一使用NgModule管理HttpClient

如果坚持用NgModule管理，需要调整组件和模块配置：

1. 修改AppComponent的standalone为false：

@Component({
  selector: 'app-root',
  standalone: false, // 改为false
  // ... 其他配置
})
export class AppComponent { /* ... */ }

2. 在AppModule的declarations中添加AppComponent：

@NgModule({
  declarations: [AppComponent], // 添加此行
  imports: [HttpClientModule, FormsModule, BrowserModule, AppRoutingModule, NgxMaskDirective, NgxMaskPipe],
  bootstrap: [AppComponent],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    provideNgxMask(),
  ]
})
export class AppModule{}

额外验证点 #

• 在浏览器控制台执行localStorage.getItem('authToken')，确认能获取到有效令牌
• 在拦截器中添加console.log('拦截器已触发')，验证是否执行
• 确保HttpClient是从@angular/common/http导入，无版本冲突

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