Angular 18函数式JWT拦截器依赖注入失败问题求助

在Angular 18的函数式拦截器中，不能直接使用大写的Inject()装饰器获取依赖——这就是你注入失败的核心原因。Inject()仅适用于类构造函数的参数注入场景，而函数式拦截器需要用Angular提供的小写inject()函数来获取依赖，它专门适配注入上下文的函数场景。

修正步骤： #

1. 导入inject函数
   在jwt.interceptor.ts顶部添加导入语句：

   import { inject } from '@angular/core';
   

2. 替换拦截器中的依赖获取方式
   将原来的Inject()调用替换为inject()：

   export function jwtInterceptor(request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
     // 用小写inject()替代大写Inject()
     const _authenticationService = inject(AuthenticationService);
     const _baseUrl = inject('BASE_URL') as string;
     
     // 你的JWT处理逻辑示例（比如为请求添加token头）
     const token = _authenticationService.getToken();
     if (token && request.url.startsWith(_baseUrl)) {
       request = request.clone({
         setHeaders: { Authorization: `Bearer ${token}` }
       });
     }
     
     return next(request);
   }
   

3. 确认BASE_URL提供者已正确注册
   确保BASE_URL的提供者已添加到应用全局providers中，比如在app.module.ts里：

   providers: [
     { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] },
     provideHttpClient(
       withInterceptors([jwtInterceptor])
     )
   ],
   

   若是独立组件应用，则在bootstrapApplication中配置：

   bootstrapApplication(AppComponent, {
     providers: [
       { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] },
       provideHttpClient(withInterceptors([jwtInterceptor]))
     ]
   });
   

关键区分： #

• 大写Inject是装饰器，仅用于类构造函数的参数标记，比如你在AuthenticationService构造函数中使用的@Inject('BASE_URL')。
• 小写inject()是函数，用于在注入上下文的函数中（比如函数式拦截器、工厂函数、路由守卫等）直接获取依赖实例。

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