JwtModule不添加授权标头

时间:2019-01-24 18:57:46

标签: angular jwt angular7 angular2-jwt

在Angular 7+项目中,我尝试使用@auth0/angular-jwt模块在​​向受保护的rest api发送请求之前添加Bearer令牌作为Authorization标头。

我在列入白名单的URL上发送了一个请求,但出现401异常,然后我检查了网络(使用提琴手),该网络传输了标头,而“授权”标头不存在。

我遵循了所有的readme指示,甚至检查了是否仅包含一次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 {}

environment.ts:

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

1 个答案:

答案 0 :(得分:0)

我使用的是Angular 9,此代码段适用于app.module.ts文件中的JwtModule。现在,它不再是列入白名单的域和列入黑名单的域,现在最新版本中允许了Domains和disableallowedRoutes。希望这对官方文档有所帮助 https://github.com/auth0/angular2-jwt

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

]

您也可以为tokenGetter做导出功能,但是我只是想展示它在一个代码片段中的工作方式。编码愉快!

package.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']
  }
})

],

techjunkieblog