如何在 Heroku 上为 Angular 应用隐藏 API 密钥

问题描述

我有一个使用 Angular 的项目的前端部分，我正在尝试找出如何在生产环境 (Heroku) 中正确隐藏 API 密钥。

我需要在本地和生产环境之间更改两个变量，即后端 URL 和 API 密钥。 我已经使用 environment.prod.ts 和 environment.ts 文件来管理切换 URL，并试图了解如何对我想隐藏的 API_KEY 执行相同的操作。

到目前为止我是这样制作的（它适用于 URL）

environment.prod.ts

import {openchargemaps} from './openchargemaps.environment';

export const environment = {
  production: false,baseUrl: 'http://localhost:8080/',...openchargemaps
};

environment.prod.ts

export const environment = {
  production: true,baseUrl: 'https://MYBACKENDBUILD.herokuapp.com/',openchargemaps: {
    API_KEY: '',}
};

openchargemaps.environment.ts（未推送到 REPO/HEROKU，仅用于本地环境）

export const openchargemaps = {
  openchargemaps: {
    API_KEY: 'XXXX-XXXX-XXXX-XXXX-XXXXXXXX'
};

对于生产，我在 heroku 上创建了环境变量： OPENCHARGEMAPS_API_KEY : XXXX-XXXX-XXXX-XXXXXXXXXXX

最后我以这种方式将其导入到我的组件中：

import {environment} from '../../environments/environment';

baseUrl = environment.baseUrl + 'ev/v1/auth/users/';
APIKey = environment.openchargemaps.API_KEY;

它适用于 URL，但不适用于 api 密钥。

我做错了什么，我该如何让它发挥作用？

For info this is my version of Angular :

ng --version

Angular CLI: 10.1.7
Node: 14.15.0
OS: win32 x64

Angular: 10.1.6
... animations,common,compiler,compiler-cli,core,forms
... platform-browser,platform-browser-dynamic,router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.7
@angular-devkit/build-angular   0.1001.7
@angular-devkit/core            10.1.7
@angular-devkit/schematics      10.1.7
@angular/cli                    10.1.7
@angular/google-maps            11.1.0
@schematics/angular             10.1.7
@schematics/update              0.1001.7
rxjs                            6.6.3
typescript                      4.0.5

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）