如何在AngularJS控制器中使用环境变量?

时间:2016-05-26 20:10:28

标签: javascript angularjs ajax api environment-variables

我将API密钥包含在我的' .env'从Git隐藏的文件。

在.env文件中

API_TOKEN=secrettokengibberish

在我的Angular控制器中,我想在进行AJAX调用时访问此变量。

在StoryController.js

var apiEndpoint = 'https://someapi.com/'+ $scope.myQuery +'.json?access_token=' + process.env.API_TOKEN;

我执行此操作时遇到的错误是:进程未在StoryController中定义

注意:我还在学习Angular,所以我不确定这是否是使用API​​密钥的正确方法。任何建议都表示赞赏。

2 个答案:

答案 0 :(得分:2)

以下是我认为您正在尝试做的事情:

1:00am

以下是您应该做的事情:

+----------+         +---------+
|          | ---1--> |         |
| Frontend | <--2--- | Backend |
|          |         |         |
+----------+         +---------+
    |   A
    |   |           +-----+
    |   |           |     |
    |   \----4------| API |
    \----3--------->|     |
                    +-----+

通常情况下,您不希望您的令牌在您的前端公开提供。

考虑在您自己的后端创建一个端点,并让它访问API而不是您的前端。

编辑:

您完全按照直接调用API的方式执行操作,而是在NodeJS后端中创建此端点。你可能想要使用像express这样的框架(这只是一个例子):

+----------+         +---------+         +-----+
|          | ---1--> |         | ---2--> |     |
| Frontend | <--4--- | Backend | <--3--- | API |
|          |         |         |         |     |
+----------+         +---------+         +-----+

然后,在你的前端,你的角度控制器会做类似的事情:

var http = require('http');
var express = require('express');
var app = express();

app.get('/:myQuery', function (req, res) {
    var apiEndpoint = 'https://someapi.com/'+ req.params.myQuery +'.json?access_token=' + process.env.API_TOKEN;
    http.get(apiEndpoint, function(apiResponse) {
        apiResponse.setEncoding('utf8');
        res.status(apiResponse.statusCode);
        apiResponse.on('data', function (chunk) {
           console.log('BODY: ' + chunk);
           res.json(JSON.parse(chunk);
        });
    });
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

答案 1 :(得分:1)

执行此操作的正确方法是在应用程序的前端以角度进行某种类型的身份验证。

通常,您将在前端登录,后端会将用户,令牌和密钥返回到前端,然后可以将其用于将来的查询。任何硬编码到您的前端代码中的令牌都可供您应用的任何用户使用。