我想将由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控制器成功注入了我的“ 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': '?????' } } }); });
我的问题是如何读取表单中呈现的令牌并将其传递给服务,并使用从登录表单中获取的令牌设置标头,据我所知,这不是操作DOM的好习惯,我不知道不知道我是否需要创建指令来执行该任务,因此欢迎提出任何建议!
我想我已经找到了一个很好的解决方案。我开始与这里的建议http://www.novanet.no/no/blog/olav- nybo/dates/2013/12/anti-forgery-tokens-using-mvc-web-api-and- angularjs/但问题是该指令在控制器之后执行。因此,如果您想在控制器中检索初始数据,则非常困难。
除了使用指令之外,还可以使用$ http服务文档中“设置HTTP标头”部分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'); }]);
我认为这是一个非常优雅的解决方案。