如何在Angular 5中使用环境变量存储敏感API密钥？

这个问题我之前帮不少开发者处理过，Angular 5确实没法直接在浏览器环境里用process.env——毕竟那是Node.js的全局对象，浏览器根本不认。不过有几个靠谱的方案，分情况给你梳理清楚：

方案1：构建时动态生成环境文件（适合可暴露给前端的密钥场景） #

Angular的环境配置是编译时注入的，所以我们可以在构建流程里加一步，把服务器的环境变量写入生产环境配置文件，彻底避免敏感信息提交到代码仓库。

具体步骤：

1. 先创建一个环境文件模板，比如src/environments/environment.prod.template.ts，内容留好占位符：

export const environment = {
  production: true,
  apiKey: '${API_KEY_PLACEHOLDER}'
};

把这个模板文件提交到仓库，同时把实际的environment.prod.ts加入.gitignore，防止误提交敏感内容。

2. 写一个简单的Node脚本generate-env.js，用来替换占位符为环境变量的值：

const fs = require('fs');
const templateContent = fs.readFileSync('./src/environments/environment.prod.template.ts', 'utf8');
const envContent = templateContent.replace('${API_KEY_PLACEHOLDER}', process.env.API_KEY);
fs.writeFileSync('./src/environments/environment.prod.ts', envContent);

3. 修改package.json的构建脚本，让它先执行生成环境文件的命令，再跑Angular构建：

"scripts": {
  "build:prod": "node generate-env.js && ng build --prod"
}

4. 在Heroku上配置好API_KEY环境变量，部署时Heroku会自动执行npm run build:prod，构建后的代码就会包含正确的密钥了。

⚠️ 注意：这个方案只适合密钥可以暴露给前端用户的场景（比如某些公开API的密钥），如果是绝对不能让用户看到的密钥，这个方法不安全——浏览器端的代码总能被反编译出来。

方案2：通过后端代理转发请求（最安全的方案） #

如果你的API密钥绝对不能暴露给用户，这才是最优解：让前端不直接调用第三方API，而是请求你自己的后端服务，由后端用环境变量里的密钥去调用第三方API，再把结果返回给前端。

以Heroku上的Express后端为例：

1. 搭建一个简单的Express服务，创建代理接口：

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/api/proxy-third-party', async (req, res) => {
  try {
    // 从环境变量获取敏感密钥
    const apiKey = process.env.API_KEY;
    // 调用第三方API，带上密钥
    const response = await axios.get('https://third-party-api.com/endpoint', {
      headers: { 'Authorization': `Bearer ${apiKey}` }
    });
    // 返回结果给前端
    res.json(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).json(error.response?.data || { message: '请求失败' });
  }
});

// 托管Angular编译后的静态文件
app.use(express.static('dist'));

app.listen(process.env.PORT || 3000);

2. 在Angular的environment.prod.ts里配置代理地址：

export const environment = {
  production: true,
  proxyApiUrl: '/api/proxy-third-party'
};

3. Angular服务里请求代理接口，而非直接调用第三方API：

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

@Injectable()
export class ApiService {
  constructor(private http: HttpClient) {}

  fetchData() {
    return this.http.get(environment.proxyApiUrl);
  }
}

4. 在Heroku上配置API_KEY环境变量，把后端和编译后的Angular静态文件一起部署即可。

这个方案里，敏感密钥全程只在服务器端存在，前端完全接触不到，安全性拉满。

方案3：编译后直接替换占位符（快速测试用） #

如果只是快速测试，不想写脚本，也可以直接在Heroku的构建命令里做替换：

ng build --prod --environment=prod && sed -i "s/API_KEY_PLACEHOLDER/$API_KEY/" dist/main.*.js

这个方法直接修改编译后的JS文件，但稳定性差——编译后的文件名可能变化，还可能破坏代码结构，不推荐用于生产环境。

内容的提问来源于stack exchange，提问作者Jason