AngularJS：将api中的csrf令牌作为常量，使用异步数据初始化应用程序

我希望查询API以获取CSRF令牌。然后在所有HTTP请求的头中设置此令牌

在我将CSRF令牌设置为angularJS应用程序的常量之前，我遇到了一些困难

app.run(['$http', function($http) {

    var csrf = $http( { method: 'GET', url: 'api/csrf' })
            .success(function(data) {
                console.log("CSRF Success: " + data.token);
                return data.token;
            })
            .error(function(data) {
                console.log("CSRF ERROR: " + data);
            });

        console.log("CSRF TOKEN: " + csrf);
        $http.defaults.headers.common['X-Csrf-Token'] = csrf;
}]);

当我运行我的应用程序时，我在浏览器控制台中获得以下信息：

CSRF TOKEN: [object Object] scripts.js?v=1400582971:32411
GET http://testapp/api/v1/supplier 400 (Bad Request) scripts.js?v=1400582971:17571
CSRF Success: zD7TrQWQWma0eHYtzM8NcgbvitB9XJzTCegjAVMg scripts.js?v=1400582971:32404

这里有几件事不对

• 首先，

  CSRF成功

  应该在

  CSRF令牌

  之前输出
• 其次，

  CSRF令牌：[object object]

  应该是

  CSRF令牌：zD7TrQWQWma0eHYtzM8NcgbvitB9XJzTCegjAVMg

• 第三，400（错误请求）的原因是get请求中发送的头是

  X-Csrf-Token:[对象]

  。标题应为

  X-Csrf-Token:zD7TrQWQWma0eHYtzM8NcgbvitB9XJzTCegjAVMg

我不希望变量

csrf

成为对象。它需要是一个实际的字符串值

一旦我完成了这项工作，我希望提取http请求，并执行如下操作：

app.factory("CSRF_TOKEN", function($http) {

    var token;

    $http( { method: 'GET', url: 'api/csrf' })
                .success(function(data) {
                    console.log("CSRF Success: " + data.token);
                    token = data.token;
                })
                .error(function(data) {
                    console.log("CSRF ERROR: " + data);
                });
});

app.run(['$http', 'CSRF_TOKEN', function($http, CSRF_TOKEN) {
    $http.defaults.headers.common['X-Csrf-Token'] = CSRF_TOKEN.token;
}]);

我的问题解决方案：

var xhReq = new XMLHttpRequest();
xhReq.open("GET", "//" + window.location.hostname + "/api/csrf", false);
xhReq.send(null);

app.constant("CSRF_TOKEN", xhReq.responseText);

app.run(['$http', 'CSRF_TOKEN', function($http, CSRF_TOKEN) {

    console.log("Injected CSRF: " + CSRF_TOKEN);

    $http.defaults.headers.common['X-Csrf-Token'] = CSRF_TOKEN;
}]);

---

您的原始解决方案不起作用，因为您希望

$http.get

返回您的令牌，但实际上此方法返回

承诺。实际数据（您的令牌）通过
success
函数异步返回

您的原始代码可能如下所示：

$http({ method: 'GET', url: 'api/csrf' })
        .success(function(response) {
            var token = response.data.token;
            console.log("CSRF Success: " + token);
            $http.defaults.headers.common['X-Csrf-Token'] = token;
            //carry on with processing
        })
        .error(function(response) {
            console.log("CSRF ERROR: " + response.status);
});

问题解决了。。。请参阅更新的解决方案。我全神贯注于寻找更好的替代方案。