如何在 Angular 中从服务器获取带有 jwt 令牌的响应标头

Posted 2023-02-27

【中文标题】如何在 Angular 中从服务器获取带有 jwt 令牌的响应标头

【英文标题】：How to get response header with jwt token in Angular from server

【发布时间】：2020-07-05 03:35:33

【问题描述】：

我使用带有 jwt 令牌的 spring security 进行授权。我发送一个带有登录名和密码的发布请求，并在授权字段中获得一个带有 jwt 令牌的响应标头。

如何从 Angular 中获取此令牌？我尝试使用此代码，但我得到了一个空值。请帮忙。

login() 


    const body =  username: this.user, password: this.pass ;
    this.http.post('http://localhost:8090/login', body,  observe: 'response').subscribe(
      (response) => 
        console.log(response.headers.get("Authorization"));
      );


 

【问题讨论】：

我认为你反其道而行之。您需要在正文中发送令牌，然后将其传递给授权标头（您可以使用 HTTP 拦截器）。然后检查后端的令牌，如果有效，则授权请求。

【参考方案1】：

我认为您的工作进展顺利，但您可能对CORS 和后端服务器响应授权的标头有疑问。

检查此代码，您收到的标头：

this.http.post('http://localhost:8090/login', body,  observe: 'response').subscribe(response => 
  const keys = response.headers.keys();
  const headers = keys.map(key =>
    `$key: $response.headers.get(key)`);

   console.table(headers);
)

如果您在控制台输出中没有看到任何 Authorization 标头，则应检查您的后端配置。

有关更多详细信息，请参阅my answer，了解有关 CORS 配置的问题。

您至少应该： - 使用 Spring Security 启用 CORS - 添加默认的 CORS 映射

@Override
public void addCorsMappings(CorsRegistry registry) 
    registry.addMapping("/api/**")
        .allowedOrigins("http://domain2.com")
        .allowedMethods("PUT", "DELETE")
        .allowedHeaders("header1", "header2", "header3")
        .exposedHeaders("Authorization")
        .allowCredentials(false).maxAge(3600);

这里，Authorization 标头在响应中公开。

注意

我的建议是将公开的标头限制在特定的端点，例如login，并选择另一个标头，例如“x-auth-tokenfor example, and send only token (not withBearer”）。

因为Authorization 语法Bearer TOKEN 用于从前端到后端的请求。