Angular getAccessToken 在标题中使用，401 问题？答案

【问题标题】：Angular getAccessToken to use in header, 401 issue?Angular getAccessToken 在标题中使用，401 问题？
【发布时间】：2018-10-14 14:41:38
【问题描述】：

我正在 Angular5 中做一个水疗中心，并希望对 azure 的活动目录 (oidc) 进行身份验证，然后能够使用 accessToken 作为标头发送 post/get 请求，但无法使其正常工作。

现在我需要了解这个 accesstoken 是否有误，是否应该在标头中包含其他内容？

在重定向到微软登录页面后，我获得了访问令牌，该页面将我重定向回我的本地主机（下面是我的 app.component.ts ngOnInit），我在其中通过下面的代码登录并保存访问令牌。

async ngOnInit() {
 this.ConfigureAuth();
  this.oauthService.tryLogin({});

  if (!this.oauthService.getAccessToken()) {
    await this.oauthService.initImplicitFlow();
  }
  console.log(this.oauthService.getAccessToken());

   this.tokenJ =  this.oauthService.getAccessToken().toString();
  console.log('getAccessToken ' + this.tokenJ);

  console.log('tid till expiration ' + this.oauthService.getAccessTokenExpiration());

  console.log(this.oauthService.authorizationHeader());



}

我在控制台记录了3次accesstoken，authorizationHeader和getAccessToken一样。 accessToken 看起来像“eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiI......”

现在，当我想访问 Azure 上的 API 时，我通过在 ConfigureAuth() 中发送客户端 ID 等获得了 accessToken，我使用 get-request 并将 accesstoken 附加到标头中，但未经授权返回 401 响应。

有人可以解释一下第一个accessToken是否只是为了让另一个accessToken被允许调用api？如果是这样，我如何获得正确的令牌以在我的 api-request 中作为标头发送？

如果我不够具体，请通过要求澄清来帮助我填写空白。

谢谢

【问题讨论】：

标签： angular typescript oauth-2.0 httprequest access-token

【解决方案1】：

我从登录页面获得了一个 JWT 访问令牌。这个 JWT 令牌应该像我已经完成的那样在标头中发送。

问题是后端没有验证令牌，因此请求失败。换句话说，前端已经在工作，问题是从后端验证 jwt。

" 当用户对应用程序进行 API 调用时，用户将 JWT 与 API 调用一起传递。在此设置中，应用程序服务器将被配置为验证传入的 JWT 是由身份验证服务器创建的（验证过程将在后面更详细地解释）。因此，当用户使用附加的 JWT 进行 API 调用时，应用程序可以使用 JWT 来验证 API 调用是否来自经过身份验证的用户。 source

【讨论】：