当前位置: 首页 > 面试题库 >

AngularJS将requestVerificationToken传递给服务

史弘致
2023-03-14
问题内容

我想将由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');
}]);

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



 类似资料:
  • 问题内容: 将“当前”传递给AngularJS服务是否正确? 我处于一种$ service的状态,知道它仅由一个控制器使用,并且我想在$ service方法本身中引用该控制器的作用域。 这在 哲学上是 正确的吗? 还是最好将事件广播到$ rootScope,然后让我的控制器侦听它们? 问题答案: 要让控制器知道何时发生异步,请使用Angular promises。 要触发,您不需要作用域,可以调用

  • 问题内容: 这里有角的新手。我试图找出将对象传递给指令时出了什么问题。 这是我的指令: 这是我调用指令的模板: 是一组对象。 当我运行此,日志,而日志罚款的范围,甚至有一个与所有的数据,我找孩子。 我不确定我在这里做错了什么,因为这种确切的方法以前对我有用。 编辑: 我已经用所有必需的代码创建了一个插件:http ://plnkr.co/edit/uJCxrG 如您所见,该作用域在范围中可用,但我

  • 问题内容: 我想知道是否有一种方法可以将参数传递给指令? 我想做的是从控制器添加一个指令,如下所示: 是否可以同时传递一个参数,以便我的指令模板的内容可以链接到一个作用域或另一个作用域? 这是指令: 如果我想使用相同的指令但使用$ scope.title2怎么办? 问题答案: 这是我解决问题的方法: 指示 控制者 现在,我可以通过同一指令使用不同的作用域,并动态附加它们。

  • 问题内容: 是否可以将参数传递给filter函数,以便您可以按任何名称进行过滤? 就像是 问题答案: 实际上,还有另一种(也许是更好的解决方案),您可以使用angular的本机“过滤器”过滤器,并且仍将参数传递给自定义过滤器。 考虑以下代码: 要进行此工作,您只需将过滤器定义如下: 如您在这里看到的,weDontLike实际上返回另一个函数,该函数的范围内有您的参数以及来自过滤器的原始项。 我花了

  • 问题内容: 我有以下指令: 这是对象结构: 我希望它根据对象内部的数据生成一个链接。 不幸的是,由于我无法访问该对象的任何内部值,因此它不起作用,但是如果我将其传递给一个简单的数据结构,例如: 我可以使用访问它。 这是我的指令代码: 谢谢 问题答案: 在Angularjs官方网站上阅读说明: @或@attr- 将本地范围属性绑定到DOM属性的值。由于DOM属性是字符串,因此结果始终是字符串。如果未

  • 的语法是 获取(url,配置)