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

Question

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

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

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

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

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

我也尝试过process.env但是我了解到这不是node.js的事情，也不是棱角分明的事情。

如何从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 ，请设置将以json格式发送此结构的post路线或api调用。

前端（浏览器）应用程序可以进行http.post调用以在运行时将其拾取。

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

安全观点

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

（浏览器）-api调用->（您​​的服务器）-api调用->（第三方）

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