在 Angular 中，我在哪里存储我的 Google 地图密钥？ [复制]

Question

我的 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();

Answer 1

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

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

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

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

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