Angular2 jwt auth 通过子模块中的拦截器

Question

我有一个应用程序，其中有几个模块遵循 post 中建议的架构。我需要知道拦截器项目文件夹结构中的正确配置和定位，以便使用 @auth0/angular-jwt 库以及模块导入结构附加授权 header 和不记名令牌。我有一个分解通用模块导入的核心模块，但 我想将此自动化的特定功能限制在我的自定义业务逻辑模块中。 在此先感谢。

Answer 1

此配置必须在 app.module.ts 文件中。例如：

// other imports...
import { JwtModule } from '@auth0/angular-jwt';

export function tokenGetter(): string {
    return localStorage.getItem('token');
}

@NgModule({
  declarations: [
    // your declarations...
  ],
  imports: [
    // your imports...
    JwtModule.forRoot({
        config: {
            tokenGetter: tokenGetter,
            whitelistedDomains: ['localhost:5000'],
            blacklistedRoutes: ['localhost:5000/api/auth']
        }
    }),
  ],
  providers: [
    // your providers...
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

Answer 2

如果您的项目中有延迟加载的模块。那么您可以使用 auth0/angular-jwt 库

的 disallowedRoutes 功能

disallowedRoutes

如果您不想替换特定路由的授权 headers，请将它们列在 disallowedRoutes 中。如果您的初始身份验证路由位于允许的域上并采用基本身份验证 headers，这将很有用。这些路由需要以正确的协议（Http://、https://）作为前缀。如果你想添加一个路由到不允许的路由列表而不考虑协议，你可以在它前面加上 //.

JwtModule.forRoot({
  config: {
    // ...
    disallowedRoutes: [
      "http://localhost:3001/auth/",
      "https://foo1.com/bar/",
      "//foo1.com/bar/baz",
      /localhost:3001\/foo\/far.*/,
    ], // strings and regular expressions
  },
});

Answer 3

import { ModuleWithProviders, NgModule } from '@angular/core';
import { LoadingComponent } from '../components/home/shared/loading/loading.component';
import { JwtModule, JWT_OPTIONS } from '@auth0/angular-jwt';
import { JwtService } from '../util';


export function jwtOptionsFactory(jwtService: JwtService) {
  return {
    tokenGetter: () => {
      return jwtService.getToken();
    }
  };
}

@NgModule({
  imports: [
    JwtModule.forRoot({
      jwtOptionsProvider: {
        provide: JWT_OPTIONS,
        useFactory: jwtOptionsFactory,
        deps: [JwtService]
      }
    })
  ],
  declarations: [LoadingComponent],
  exports: [JwtModule],
})
export class AuthModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: AuthModule
    };
  }
}

将 AuthModule.forRoot() 添加到 app.module.ts

的导入中

Angular2 jwt auth 通过子模块中的拦截器

Angular2 jwt auth via interceptor in submodule

angular

jwt-auth