angular - 如何在 Angular 5 中为敏感键使用环境变量

Question

我有一个敏感的 API key ，我的 Angular 5 服务需要访问它。由于我计划将此应用程序部署到使用环境变量进行生产配置的云服务(即 Heroku)，因此理想情况下，我希望将此敏感 key 存储为环境变量，而不是通过在存储库。不幸的是，Angular 5 似乎不支持这个(例如 Use process.env in Angular 5 environment )。
是否有一种技术可以让我使用 将我的敏感 key 定义为环境变量并让我的 Angular 服务获取它？ 或者是否有另一种技术可以让我不必将敏感 key 存储在我的存储库中，但仍然允许我的生产 Angular 服务访问它？
服务示例

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class SpecialService {
  url = 'https://www.specialservice.com/';

  constructor(private http: HttpClient) { }

  getValue(userParm: string) {
    const SUPERSECRETKEY = 'fetch me from an env variable, please';
    return this.http.get(this.url + 'query?function=DO_SOMETHING&parm1='
      + userParm + '&apikey=' + SUPERSECRETKEY);
  }
}

我知道我可以使用 src/environments/environment.prod.ts 来存储要在生产中使用的变量，而使用 src/environments/environment.ts 来存储开发变量。不幸的是，这需要我将敏感变量提交到在存储库中可见的生产文件中，这是不可取的。我的偏好是使用我在生产环境中手动定义的某种环境变量。
感谢您的任何建议或想法!

Answer 1

在这种情况下，您最好在服务器上代理 api 调用。例如，如果您正在使用 node，您可以从前端应用程序调用 node 服务器，并使用它(连同 super key )转过来调用第二个 api。您发送到 UI 的任何内容都应被视为受到损害。您将能够在 Node pretty easily 上使用环境变量.