使用 Angular 的 HttpClient 请求的安全方法是什么？答案

【问题标题】：What is the safe way of using Angular's HttpClient request?使用 Angular 的 HttpClient 请求的安全方法是什么？
【发布时间】：2020-05-13 17:41:18
【问题描述】：

官方 angularHttpClient guide 建议通过以下方式构建 HTTP 请求服务：

getConfig() {
  // now returns an Observable of Config
  return this.http.get<Config>(this.configUrl);
}

同时还提供以下免责声明：

指定响应类型是向 TypeScript 声明它应该将您的响应视为给定类型。这是一个构建时检查，并不能保证服务器实际上会用这种类型的对象响应。由服务器来确保即返回服务器 API 指定的类型。

虽然我喜欢让服务返回定义明确的类型的主要概念，但免责声明表明这还没有完全适用于现实世界，没有人可以依赖某些外部软件系统的响应格式.

在 Angular 中实现 HTTP 请求服务的最佳实践是什么？该服务将可靠地返回预期类型的对象（在当前示例中为 Config）或提供处理错误的方法？

【问题讨论】：

当然它已经为现实世界做好了准备。当服务器由于某种原因而关闭时，您将不会获得任何配置文件，您只会收到 404 错误。这就是本段的意思。
在我的项目中（我同时控制服务器端和客户端），由于以下原因，我发现有必要对响应进行管道和转换： 1. 我想要一个类，而不是返回一个接口。 2. Json 类型与预期类型不匹配。我相信响应可以以类似的方式处理：管道响应并添加验证（或者，如果您打算使用类，则可以在构造函数中执行此操作）

标签： angular typescript angular-httpclient type-safety

【解决方案1】：

如果我对您的问题的理解正确，那么您希望实现一些东西来处理答案，或者更具体地说，每当您发出无效的 http 请求时，处理后端的错误状态。一个 http 请求返回一个 observable。您可以订阅 observable 并实现 next()、error() 和 complete() 函数。因此，例如，如果您有一个登录并创建一个 http.post 并且您的 api 返回（当登录成功时）一个令牌，您可以在下一个函数中处理它。看看这个例子：

login(object) {
    var headers = new HttpHeaders({
        "Content - Type": "application / json" });
            this.http.post<LogAnswer>('localhost/api',
            {
                object
                //JsonObject
            },
            {
                headers
            }
        ).subscribe(
            (val) => {
                //stuff you do when it was accomplished,
                //val is the response you get from the api
            },
            (error) => {
                //error message when your login for example was not valid
                //this function will be triggered when you get a 401 for example
                window.alert("Not succesfull")

            }
        );
    }

【讨论】：

【解决方案2】：

Angular 可以协助类型声明。但是要拥有完整的类型断言，您可以利用 Typescript 的断言功能。一种快速的方法是使用类型谓词来使用类型保护。

private isConfig(config: Config | any): config is Config {
  return (config as Config).<property> !== undefined;
}

<property> 占位符必须替换为特定于 Config 类型的属性。然后您可以使用以下方法在运行时断言类型

import { of, throwError } from 'rxjs';
import { switchMap } from 'rxjs/operators';

getConfig() {
  return this.http.get<Config>(this.configUrl).pipe(
    switchMap(response => {
      if (this.isConfig(response)) {
        return of(response);
      } else {
        return throwError('The reponse is not of type Config');
      }
    }
  );
}

【讨论】：