在 Angular 7+ 项目中,我尝试使用 @auth0/angular-jwt 模块在将请求发送到受保护的 rest API 之前添加 Bearer 令牌作为授权标头。
我在白名单 URL 上发送了请求并收到 401 异常,然后我检查了网络(使用 fiddler)传输了哪个标头,授权标头不存在。
我遵循了所有自述文件指示,甚至检查了是否只包含一次 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 {}
环境:
export function tokenGetter() {
return localStorage.getItem('access_token');
}
我在 Angular 9 上,这个代码片段适用于 app.module.ts 文件中的 JwtModule。它不再是白名单域和黑名单域,现在允许最新版本中的域和不允许路由。 希望这有助于官方文档在这里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']
}
})
],
技术迷博客