AngularJS 将 requestVerificationToken 传递给服务

Question

我想将我的登录表单中由 Razor MVC 帮助程序生成的 RequestVerificationToken 传递给我用来管理应用程序身份验证的 AngularJS 服务

我的表格如下:

<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() 以这种方式呈现:

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

我的 AngujarJs Controller 成功注入(inject)了我的“loginService”，我可以通过 Post 将用户名和密码发送到服务

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': '?????' }
                    }
                });
        });

我的问题是如何读取表单中呈现的 token 并将其传递给服务并使用从登录表单获取的 token 设置 header ，据我所知这不是操作 DOM 的好习惯，并且我不知道是否需要创建一个指令来执行该任务，因此欢迎提出任何建议!

Answer 1

我想我已经找到了一个非常好的解决方案。我从这里的建议开始http://www.novanet.no/no/blog/olav-nybo/dates/2013/12/anti-forgery-tokens-using-mvc-web-api-and-angularjs/但问题是该指令是在 Controller 之后执行的。所以如果你想检索 Controller 中的初始数据是非常困难的。

不使用该指令，只需使用 $http 服务文档中“设置 HTTP header ”部分 http://docs.angularjs.org/api/ng.$http 下引用的 Module.run() 方法即可。 .

我将上面博客文章中引用的 HtmlHelper 扩展与 body 元素一起使用，然后我的 Module.run() 如下所示:

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

我认为这是一个非常优雅的解决方案。