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

Question

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

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

我有两组环境变量要为 prod 和 dev 设置。例如:

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

这对于产品来说显然是不同的。我的问题是我正在使用 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 调用以在运行时获取它。

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

安全观点

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

(浏览器) -- api 调用 --> (您的服务器) -- api 调用 --> (第 3 方)

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