我在 Angular 中的什么地方存储我的 Google 地图密钥？

Question

我的 Angular 应用程序中有一个打字稿页面调用 Google 映射时区。

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

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

在环境文件中？
每次要用都要从服务器上取吗？
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 应用程序中 keys，api_url's 在 environment files 中被提及（因为不同环境中的值不同，生成产品代码时会解决）。如果您想以某种方式在服务器端保留密钥或 URL 东西，那么：

为您的初始路线写一个 resolver，点击您的服务器 api 获取密钥和 URL 并获取东西。
APP_INITIALIZER 一旦您的应用程序加载完毕，请检查 [APP_INITIALIZER]

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

给 Authenticat/Authorize 用户而不是点击 API 是 (1)

之上的另一个额外层

P.S。大多数此类服务也映射到域，因此即使您将 KEY 保留在客户端（angular 应用程序的 envrionemnt 文件），它也不会造成太大影响（据我所知）。

我在 Angular 中的什么地方存储我的 Google 地图密钥？

Where do I store my Google Maps key in Angular?

angular

typescript

google-maps-api-3