Angular15集成@auth0/angular-jwt遇inject()错误的解决咨询

问题根源分析 #

你遇到的两个核心问题：

1. 类型警告：{config: ...} 无法赋值给 Routes 类型，本质是配置结构与当前安装的 @auth0/angular-jwt 版本不匹配，新版本已移除外层 config 嵌套结构。
2. NG0203 错误：是由于 JWT 模块初始化时，tokenGetter 函数的执行上下文不符合 Angular 注入规则，或模块配置方式触发了非法的 inject() 调用。

1. 确保依赖版本兼容 #

Angular 15 需要搭配 @auth0/angular-jwt v5.x 版本，先确认并安装正确版本：

npm install @auth0/angular-jwt@^5.2.0 --save

2. 修正 JwtModule 配置 #

方案一：简化直接配置（无需依赖注入） #

移除外层 config 嵌套，直接传入 JWT 配置项，这是当前版本的标准写法：

import { HttpClientModule } from "@angular/common/http";
import { JwtModule } from "@auth0/angular-jwt";

export function tokenGetter() {
  return localStorage.getItem("jwt");
}

@NgModule({
  declarations: [
    // ...你的组件列表
  ],
  imports: [
    HttpClientModule,
    // 修正后的JwtModule配置
    JwtModule.forRoot({
      tokenGetter: tokenGetter,
      whitelistedDomains: ["localhost:5001"],
      blacklistedRoutes: []
    })
  ],
  providers: [
    // ...你的服务列表
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIconPacks(far, fab);
  }
}

方案二：工厂函数配置（适合需要注入依赖的场景） #

如果后续 tokenGetter 需要依赖其他服务（比如 HttpClient），使用工厂函数确保注入上下文合法：

import { HttpClientModule } from "@angular/common/http";
import { JwtModule, JwtModuleOptions } from "@auth0/angular-jwt";
import { InjectionToken } from '@angular/core';

export const JWT_OPTIONS = new InjectionToken<JwtModuleOptions>('JWT_OPTIONS');

export function jwtOptionsFactory() {
  return {
    tokenGetter: () => localStorage.getItem("jwt"),
    whitelistedDomains: ["localhost:5001"],
    blacklistedRoutes: []
  };
}

@NgModule({
  declarations: [/* ...你的组件 */],
  imports: [
    HttpClientModule,
    JwtModule.forRoot({
      jwtOptionsProvider: {
        provide: JWT_OPTIONS,
        useFactory: jwtOptionsFactory
      }
    })
  ],
  providers: [/* ...你的服务 */],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIconPacks(far, fab);
  }
}

3. AuthGuard 正确使用示例 #

你的 AuthGuard 代码本身无问题，需在路由配置中启用它：

// 在你的路由模块（如 app-routing.module.ts）中
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  { 
    path: 'dashboard', 
    component: DashboardComponent, 
    canActivate: [AuthGuard] // 应用AuthGuard保护路由
  },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 清理项目确保生效 #

如果修改后仍有异常，执行清理和重建：

ng clean && ng build && ng serve

内容的提问来源于stack exchange，提问作者R. Nourmandi