Angular中HTTP_INTERCEPTORS注入令牌缺失ɵprov定义报错求助

核心问题 #

你代码里的authInterceptorProviders对象存在拼写错误：把useClass写成了usecClass，这会导致Angular无法识别拦截器的提供者配置，触发NG0204错误。另外还有一个隐性问题：请求头的键名设置有误，会导致后端无法识别正确的Authorization头。

修正后的auth.interceptor.ts代码 #

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HTTP_INTERCEPTORS } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { LoginService } from "../login/login.service";

const TOKEN_HEADER = "Authorization";
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private loginService: LoginService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let authReq = req;
        // 获取令牌
        const token = this.loginService.getToken();
        // 为请求添加JWT令牌
        if (token != null) {
            authReq = authReq.clone({
                setHeaders: { [TOKEN_HEADER]: `Bearer ${token}` }, // 用方括号包裹变量，确保键名为Authorization
            });
        }
        return next.handle(authReq);
    }
}

export const authInterceptorProviders = [{
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor, // 修正拼写错误
    multi: true,
}]

确保拦截器正确注册 #

在app.module.ts的providers数组中添加拦截器提供者：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { authInterceptorProviders } from './path/to/auth.interceptor'; // 替换为你的实际文件路径

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [authInterceptorProviders], // 注册拦截器
  bootstrap: [AppComponent]
})
export class AppModule { }

额外检查点 #

• 确认LoginService已添加@Injectable({ providedIn: 'root' })装饰器，或者在对应模块的providers中注册，避免注入失败。
• 验证登录后LoginService.getToken()能正确返回JWT字符串，而非null或空值。

内容的提问来源于stack exchange，提问作者Michael . _ .