AngularJS传递requestVerificationToken到服务 [英] AngularJS pass requestVerificationToken to a service

问题描述

我想通过一个由剃刀MVC帮手产生在我的登录表单，我已经做了我的管理应用程序的身份验证AngularJS服务RequestVerificationToken

I'd like to pass a RequestVerificationToken which is generated by a Razor MVC helper in my login form to an AngularJS service that I've done to manage the authentication of my application

我的格式如下：

<div ng-model="loginRequest" >
        <form ng-submit="submit()"  ng-controller="loginCtrl">
            @Html.AntiForgeryToken()

            <input id="username" ng-model="loginRequest.Username"  type="text" name="text"  />
            <input id="password" ng-model="loginRequest.Password" type="text" name="text" />
            <input type="submit" id="submit" value="Submit" />
            <br/>
            isValid: {{loginRequest.isValid}}
            <br/>
            username: {{loginRequest.Username}}
            <br/>
            Password: {{loginRequest.Password}}
        </form>
    </div>

在@ Html.AntiForgeryToken（）呈现了这种方式：

the @Html.AntiForgeryToken() renders in this way:

<input name="__RequestVerificationToken" type="hidden" value="AVzyqDKHSPjaY7L_GTpkasMAABRQRVRFUkFMSUVOV0FSRVxQZWRybwA1">

我AngujarJs控制器成功地注入我的login服务，我可以通过邮寄方式发送给服务的用户名和密码

my AngujarJs controller injects successfully my "loginService" and I can send via Post the username and the password to the service

function loginCtrl($scope, loginService) {
   $scope.submit = function () {
      loginService.authenticate($scope.loginRequest,function(data) {
          $scope.loginRequest.isValid = (data.User!=null);
          //console.log(data);
      });

   };
}

该服务：

angular.module('App.services', ['ngResource']).
    factory('loginService',
        function ($resource) {
            return $resource('/Api/User/login', '',
                {
                        authenticate: {
                        method: 'POST',
                        isArray: false,
                        headers: { 'X-XSRF-Token': '?????' }
                    }
                });
        });

我的问题是我怎么能阅读的形式呈现的令牌，并将其传递给服务，并设置与登录表单采取的令牌的头，据我是知道是不是一个很好的做法来操作DOM和我不知道我是否需要创建一个指令，所以任何建议，欢迎来执行任务！

my question is how can I read the token rendered in the form and pass it to the service and set a header with the token taken from the login form, as far I as Know is not a good practice to manipulate the DOM and I don't know if I'll need to create a directive to perform that task so any suggestions are welcome!

推荐答案

我想我已经找到了一个pretty很好的解决方案。我开始与建议，这里的http://www.novanet.no/no/blog/olav-nybo/dates/2013/12/anti-forgery-tokens-using-mvc-web-api-and-angularjs/但问题是，指令控制器后执行。所以，如果你想在控制器中获取原始数据是非常困难的。

I think I've found a pretty good solution. I started with the suggestions here http://www.novanet.no/no/blog/olav-nybo/dates/2013/12/anti-forgery-tokens-using-mvc-web-api-and-angularjs/ but the problem was that the directive is executed after the controller. So if you wanted to retrieve initial data in the controller it was very difficult.

除了使用该指令只使用Module.run（）方法作为设置HTTP头部分的 http://docs.angularjs.org/api/ng.$http 。

Instead of using the directive just use the Module.run() method as referenced in the $http service documentation under the Setting HTTP Headers section http://docs.angularjs.org/api/ng.$http.

我以前在博客文章中引用上面body元素，然后我的Module.run（在扩展的HtmlHelper）看起来是这样的：

I used the HtmlHelper extension referenced in the blog post above with the body element and then my Module.run() looks like this:

myModule.run(['$http', function($http) {
    $http.defaults.headers.common['RequestVerificationToken'] = angular.element("body").attr('ncg-request-verification-token');
}]);

我觉得它使一个pretty优雅的解决方案。

I think it makes for a pretty elegant solution.

这篇关于AngularJS传递requestVerificationToken到服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！