Angular HttpClient 和 Observables答案

【问题标题】：Angular HttpClient & ObservablesAngular HttpClient 和 Observables
【发布时间】：2018-08-10 08:58:16
【问题描述】：

我正在尝试为我的 Angular Web 应用程序编写一个 TypeScript 方法，该方法只是通过 Http 调用检查服务器上 JWT 令牌 的有效性。 p>

我希望这个方法返回一个布尔值，告诉我的调用者令牌是否有效。我来自 C#，所以我希望我可以做这样的事情，但我还不清楚 JS/TS 中函数返回是如何管理的：

verifyCanActivate(): boolean {

const actionUrl = this.apiBaseUrl + 'ValidateToken';

this.http.get(actionUrl)
    .map((data: HttpResponse<any>) => data.status === 200);}

Http 拦截器 已经设置好了，所以我发出的每个请求都会自动使用标头身份验证信息进行修饰。

我对这个控制器的服务器端操作是一个空的 ASP.NET Core WebAPI 方法，标记有 [Authorize] 属性，因此我可以在每次调用时轻松检查客户端令牌的有效性。

如何编写我的 TS 方法，以便它可以根据 HttpResponse 状态返回 boolean 值？如果您能提供有关此主题的有用且最新的文档，我也将不胜感激。

提前谢谢你。

【问题讨论】：

要同步调用方法吗？或者您是否可以更改方法的使用方式，即异步调用它？我问是因为你可能会被告知从这个方法返回一个 observable。
顺便说一句，只是出于好奇 > 为什么你想要显式的 JWT 验证检查端点，因为你已经有了拦截器，它可以让你的 jwt 检查每次调用以 [Authorize] 装饰的端点？
@deezg 有没有办法将拦截器验证与角度路由保护系统集成？
为什么要将它与角度路由集成？它是两个不同的东西。您的应用程序中应该有一些状态（jwt 令牌）（不知道您是否使用 ngrx 或一些状态管理）来指示用户是否成功登录。该状态检查进入警戒状态。然后，完全分离，您的所有 api 调用都将添加 aurhotization 标头和 jwt（发生在拦截器中）。现在，当您的[Authorize] 装饰端点被未经授权的用户（或过期的jwt）击中时，它应该返回401。这就是您在拦截器中处理的内容并重定向到登录页面。

标签： angular http rxjs observable httpclient

【解决方案1】：

您的verifyCanActivate 方法应该返回Observable<boolean>，然后当您实际使用它（阅读、订阅它）时，您将获得布尔值。

所以，是这样的：

verifyCanActivate(): Observable<boolean> {

const actionUrl = this.apiBaseUrl + 'ValidateToken';

return this.http.get(actionUrl)
    .map((data: HttpResponse<any>) => data.status === 200);
}

（注意 return > 你将返回 this.http.get observable）

然后你像这样使用它：

verifyCanActivate().subscribe(responseValue => console.log(returnValue));

【讨论】：

【解决方案2】：

在 Angular HttpClient 中，将响应作为可观察对象返回。您可以定义可观察对象的数据类型，但无论如何它都会返回可观察对象。所以你必须像这样修改方法的返回类型。

verifyCanActivate(): Observable<boolean> {

由于 Observable 是异步的，因此您无法直接访问从服务器返回的值。你需要订阅 observable 然后只有我们可以访问数据。

verifyCanActivate().subscribe( (result: boolean) => {
   console.log(result) // the boolean value
})

【讨论】：

【解决方案3】：

就像已经说过的其他答案一样，您的方法返回一个您可以订阅的Observable<boolean>。但是要获取HttpResponse 的状态，您需要添加observe: 'response' HttpOption。否则只能查看响应 - 正文。

verifyCanActivate(): Observable<HttpResponse<any>> {

  const actionUrl = this.apiBaseUrl + 'ValidateToken';

  return this.http.get(actionUrl, { observe: 'response' });
}

你的订阅应该是这样的：

verifyCanActivate().subscribe((response: HttpResponse<any>) => 
  response.status === 200
);

【讨论】：