JWT 与 Angular 和 SpringBoot

Posted 2023-02-27

【中文标题】JWT 与 Angular 和 SpringBoot

【英文标题】：JWT with Angular and SpringBoot

【发布时间】：2019-01-10 06:48:08

【问题描述】：

我想在我当前连接到 Spring Boot 后端的 Angular 应用程序中集成 JWT 身份验证。

我浏览了很多教程，但大多数都不适合，因为它们连接到 Auth0。我想自己处理用户管理。

我找到了这个例子：

角度：https://medium.com/@juliapassynkova/angular-springboot-jwt-integration-p-1-800a337a4e0

Spring Boot：https://medium.com/@nydiarra/secure-a-spring-boot-rest-api-with-json-web-token-reference-to-angular-integration-e57a25806c50

不幸的是，这个 Angular 前端是 Angular 4，而我已经在使用 Angular 6。他们使用与 Angular 6 不兼容的“angular2-jwt”。我必须使用“auth0/angular-jwt”。

我的问题是，在我使用登录表单后，浏览器会再次打开一个登录弹出窗口以登录后端。但即使有正确的凭据，它也不起作用。我猜，请求中缺少一些凭据。在 app.module.ts 中有 2 个旧的 angular2-jwt 代码，我不知道如何将其升级到 auth0/angular-jwt

export function authHttpServiceFactory(http: Http) 
  return new AuthHttp(new AuthConfig(
    headerPrefix: 'Bearer',
    tokenName: TOKEN_NAME,
    globalHeaders: ['Content-Type': 'application/json'],
    noJwtError: false,
    noTokenScheme: true,
    tokenGetter: (() => localStorage.getItem(TOKEN_NAME))
  ), http);

和

providers: [
    provide: AuthHttp, useFactory: authHttpServiceFactory, deps: [Http],
]

谁能帮我解决这个问题。可能是我的猜测有误，可能是别的原因？

附注；我刚刚更改了前端，但尝试从示例连接到后端。如果我同时使用示例中的前端和后端，它的工作正常。

【问题讨论】：

jhipster 是一个很好的例子，展示了如何使用 Spring Boot 进行 JWT。

@Peter - 如果您解决了问题，是否可以发布您的代码。我现在正在迁移到 auth0/angular-jwt 并且遇到了很多问题。如果你愿意，我可以在 github 上分享我的代码

【参考方案1】：

几个月前，我已经成功地从 angular2-jwt 迁移到 auth0/angular-jwt。这样做时您必须牢记的是：

auth0/angular-jwt 使用了新的 angular HttpClient 库，所以如果你想使用它，你必须将所有应用程序迁移到它（我建议还是这样做，新库非常棒）

新的 angular-jwt 使用 HttpInterceptors - 这允许您将 JWT 直接附加到 HttpClient 过滤器链。所以你不必迁移上面的代码。您必须将其完全删除并替换为拦截器初始化：（从 auth0/angular-jwt 文档复制粘贴）：

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

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


@NgModule(
  bootstrap: [AppComponent],
  imports: [
    // ...
    HttpClientModule,
    JwtModule.forRoot(
      config:   
        tokenGetter: tokenGetter,  
        whitelistedDomains: ['localhost:3001'],  
        blacklistedRoutes: ['localhost:3001/auth/']  
        
    )  
  ]  
)  
export class AppModule 

请记住在您的根模块中应用此代码 - 然后使用您的 HttpClient 而不做任何更改，拦截器将自动应用 JWT。如果出现问题 - 责备 whitelistedDomains/blacklistedRoutes。这些字段目前实现得很差，并导致正则表达式等问题。 由于迁移并不简单，并且花了我很多时间，请随时询问。很有可能我会知道答案。

【讨论】：

非常感谢米哈尔。您的信息对我帮助很大，尽管这不是我的代码中的问题。但这是你无法知道的。你指引我走上正确的道路。我的问题是，没有发送标头，因为 Angular 6 的合成器发生了变化。我不能只将标题附加到标题对象，我必须使用 .set()。现在它正在工作，我只需要将示例中的后端实现到我的 Spring Boot 后端

@Michal - 我现在正在实施 auth0/angular-jwt。如果用户实际上没有登录，不知道为什么它永远不会进行身份验证。我的意思是当我点击用户舔时，如果用户没有经过身份验证，它之前会转到登录页面。但现在它直接进入用户页面。你能帮我么。如果gihub有完整的代码，可以分享一下吗？

@Michal - 如果你愿意，我可以在 github 上分享我的代码

@Michal - 我可以登录，但对于下一次休息呼叫（GET 请求），它没有授权。我猜它确实通过了令牌。如何传递令牌？