JwtModule 不添加授权标头

Posted 2023-03-04

【中文标题】JwtModule 不添加授权标头

【英文标题】：JwtModule doesn't add Authorization header

【发布时间】：2019-06-18 14:23:44

【问题描述】：

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

我在列入白名单的 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');

【问题讨论】：

您为自述文件提供的链接是针对 AngularJS 应用程序的，而不是针对 Angular 的。这是正确的链接吗？此外，Angular 提供了一个带有拦截器的 http 服务，在这些拦截器中你可以附加你的不记名令牌。最后一件事，您的 localStorage 是否真的有一个名为 access_token 的项目？

糟糕，我编辑了链接！该模块应提供 HttpInterceptor

好吧，不管怎样，你在哪里打电话给localStorage.setItem？

在 AuthService 上，我在控制台上检查了令牌是否已设置，实际上使用了 getter 函数

为什么需要图书馆？通过简单的拦截器添加它有什么问题？

【参考方案1】：

我在 Angular 9 上，此代码 sn-p 适用于 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 执行导出功能，但我只是想展示它如何在一个代码 sn-p 中工作。编码愉快！

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

【讨论】：

确保它在 app.module.ts 部分的导入部分中，我把它放在最后还确保在使用 jwt 库之前已经导入了 HttpClientModule。如果您收到未定义 allowedDomains 的错误，那么您可能使用的是早期版本，而必须使用 whitelistedDomains。在你的 package.json 文件中查看我的是“@auth0/angular-jwt”：“^5.0.1”，使用 Angular 9