0

在 Angular 7+ 项目中，我尝试使用@auth0/angular-jwt模块添加一个 Bearer 令牌作为授权标头，然后再将请求发送到受保护的 rest api。

我在列入白名单的 URL 上发送了一个请求并收到 401 异常，然后我检查了网络（使用提琴手）传输了哪个标头，授权标头不存在。

我遵循了所有自述文件的指示，甚至检查了是否只包含了一次 HttpClientModule。

app.module.ts ：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { JwtModule } from '@auth0/angular-jwt';
import { tokenGetter } from './environment';

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

@NgModule({
  declarations: [
    AppComponent
    // ... other components
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        whitelistedDomains: ["localhost:8080"]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

环境.ts：

export function tokenGetter() {
    return localStorage.getItem('access_token');
}
4

1 回答 1

3

我在 Angular 9 上，这个代码片段适用于 app.module.ts 文件中的 JwtModule。它不再是 whitelistedomains 和 blacklisteddomains，它现在是最新版本中的 allowedDomains 和 disallowedRoutes。希望这有助于官方文档在这里 https://github.com/auth0/angular2-jwt

    JwtModule.forRoot({
  config: {
    tokenGetter: () => {
      return localStorage.getItem('token');
    },
    allowedDomains: ['localhost:5000'],
    disallowedRoutes: ['localhost:5000/api/auth']
  }
})

]

您也可以为 tokenGetter 执行导出功能，但我只是想在一个代码片段中展示它是如何工作的。快乐编码！

包.json：

    "@auth0/angular-jwt": "^5.0.1",

app.module.ts 导入代码：

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

完整的导入代码：

  imports: [
BrowserModule,
HttpClientModule,
FormsModule,
BrowserAnimationsModule,
BsDropdownModule.forRoot(),
NgxGalleryModule,
TabsModule.forRoot(),
RouterModule.forRoot(appRoutes),
JwtModule.forRoot({
  config: {
    tokenGetter: () => {
      return localStorage.getItem('token');
    },
    allowedDomains: ['localhost:5000'],
    disallowedRoutes: ['localhost:5000/api/auth']
  }
})

],

技术迷博客

于 2020-07-18T07:16:24.117 回答