Angular 2 环境变量 - 设置基本身份验证密码

Question

我使用sails.js 编写了一个非常简单的服务。它使用基本身份验证来访问其服务。

我还有一个用 Angular 编写的单独前端，使用 @angular/cli。

我为 prod 和 dev 设置了两组环境变量。例如：

// dev
ADMIN=admin
ADMIN_PASS=mypassword123
API_ENDPOINT=http://localhost:1337/endpoint

这对于 prod 来说显然是不同的。我的问题是我正在使用 Heroku 部署它。您可以轻松地在 heroku 中设置环境变量，但我不知道如何访问它们。我知道你可以在src/environments 中设置东西，但这会将我的变量置于代码控制中。

我也尝试过process.env，但我了解到这是一个 node.js 的东西，而不是 Angular 的东西。

如何从 angular2 访问系统环境变量？

我如何使用它的示例：

 @Injectable()
 export class HeroService {
   private heroesUrl = 'api/heroes';  // <- this should be grabbed from environment
   private adminUser = 'admin'; // this line too...
   private adminPass = 'myPassword'; // same with this line... 
   constructor (private http: Http) {}
   getHeroes(): Observable<Hero[]> { ...}
 }

Answer 1

编程观点

使用process.env 然后服务器端（nodejs）可以将它们放入一个结构中。由于您使用的是sails.js，请设置post 路由或API 调用，以json 格式发送此结构。

前端（浏览器）应用可以在运行时调用 http.post 来获取它。

这样，参数集就不会在前端应用代码库中捆绑/硬编码。

安全观点

如果第 3 方服务需要密码凭据，则最好从服务器端处理此类调用，如下所示：

(浏览器) -- api 调用 --> (你的服务器) -- api 调用 --> (3rd-party)

这种方式不会暴露给第 3 方的凭据。对服务器的 api 调用应该受到某种身份验证机制的保护。