时间戳

首页 > 解决方案 > 在 Angular 中，我在哪里存储我的 Google 地图密钥？

angular - 在 Angular 中，我在哪里存储我的 Google 地图密钥？

问题描述

我的 Angular 应用程序中有一个打字稿页面，它调用 Google 地图时区。

我认为这不是一个好主意，或者将 url 或密钥存储为硬编码字符串似乎不是一个好主意。我现在正在做这两件事。

存储这两个值（url，key）的规定方法是什么？

  1. 在环境文件中？

  2. 每次我想使用它时从服务器获取它？

  3. Angular 项目中的其他文件？

这是我构建它的方式。这都是硬编码在 .ts 文件中的。

const url = 'https://maps.googleapis.com/maps/api/timezone/json?location=' + this.latitude.value + ',' + this.longitude.value + '&timestamp=' + Math.floor(Date.now() / 1000).toString() + '&key=' + 'my-google-key';
const timeZoneResult = await fetch(url, {
  method: 'GET'
});
const timeZone = await timeZoneResult.json();

标签： angulartypescriptgoogle-maps-api-3

解决方案

它更像是客户端与服务器端。理想情况下，在 Angular 应用程序keys中，api_url's会提到environment files（因为不同环境中的值不同，在生成产品代码时会得到解决）。如果您想在服务器端保留密钥或 URL 内容，那么：

  1. 为您的初始路线编写一个resolver，点击您的服务器 api 获取密钥和 URL 并获取内容。
  2. APP_INITIALIZER一旦您的应用程序加载检查[ APP_INITIALIZER ]

每当您访问该路由时，以下 (1) 都会给您带来麻烦，它会触发解析，因此要检查您的脚本 URL 是否触发两次，您必须维护一个标志。通过这两种方式，您可以点击服务器 API 获取 URL 和 TOKEN，然后可以添加到 DOM 中。

验证/授权用户而不是访问 API 是 (1) 之上的另一个额外层

PS大多数此类服务也与域映射，因此即使您保留KEY在客户端（角度应用程序的环境文件）也不会造成太大影响（在我有限的知识中）。

推荐阅读