使用 Typescript Angular 中的接口检查 API 响应数据

Question

我有一个应用程序，当用户登录时，他收到了一些数据作为响应，但如果响应不是我所期望的，应用程序就会崩溃。

让我向您展示以下内容：

我创建了一个接口来告诉 Typescript 我期望的数据。

export interface AuthResponseData {
  token: string;
  expires: string;
  role: number;
}

然后我创建了一个方法来将登录数据发送到服务器。

login(user: string, password: string){
  return this.http.post<AuthResponseData>(
    'https://localhost:44344/api/auth', { user: user, pwd: password }
  ).pipe(
    catchError(this.handleError),
    tap(resData => { this.handleAuthentication(resData.token, resData.expires, resData.role)})
  );
}

我期待如果来自服务器的响应与接口不匹配，那么 Angular 将重定向到catchError. 但不会发生。

现在我的问题是：有什么方法可以检查 API 响应是否等于接口，如果不是则抛出错误。或者我问的是不可能的？

更新：

搜索后，我发现接口在运行时消失了，因此无法将 api 响应与接口进行比较（据我所知）。但我一直在寻找一种以动态方式检查 api 响应的方法。我认为取决于 api 响应总是正确的，这并不是真正安全的。所以我应该检查 API 响应。我怎样才能做到这一点？

希望你能帮助我，谢谢:)

Answer 1

正如您已经注意到的， aninterface纯粹是 TypeScript，它不存在于 JavaScript 中，也不会以任何方式模拟（就像private、protected、public和其他一些东西一样）。TypeScript 中的类型检查只允许具有“快速失败”逻辑（您不必运行应用程序来注意到您自己的代码或第三方库被滥用，它在编译时失败）。

你的 Angular 应用程序只是一个 UI，不涉及任何关键操作（它们应该位于你的后端），所以我认为由于类型不匹配而引发错误不是一个好主意，而不是仅仅尝试满足尽可能多的用户。根据我的说法，后端应该验证客户端输入，并且客户端应该尝试适应后端服务。

话虽这么说，这里有一个 JSON 验证草案https://json-schema.org/并且一些库实现了它（例如：https: //github.com/epoberezkin/ajv）。这将使您获得所需的行为。