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

Question

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"));
      });


 }

Answer 1

我认为你是在良好的轨道上，但你可能有一个关于COR和头部授权响应后端服务器的问题。

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

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头，则应该检查后端配置。

@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);
}

我的建议是将公开的标头限制在特定的endpoint，例如login，还可以选择另一个标头，例如'x-auth-token，并且只发送token（不使用bearer`)。

因为语法为承载令牌的授权用于从前端到后端的请求。