使用angularjs进行登录授权的代码_Angularjs

使用angularjs进行登录授权的代码

angularjs

使用angularjs进行登录授权的代码,angularjs,Angularjs,我对angularjs是新手。。。我需要使用编码凭据编写登录授权代码的帮助。。我需要做我在jquery中做过的事情。下面给出了我的jquery代码。使用JavaREST服务和mysql作为后端 <script type="text/javascript"> $(document).ready(function(){ $(".user_login").click(function(){

我对angularjs是新手。。。我需要使用编码凭据编写登录授权代码的帮助。。我需要做我在jquery中做过的事情。下面给出了我的jquery代码。使用JavaREST服务和mysql作为后端

<script type="text/javascript">
$(document).ready(function(){               
    $(".user_login").click(function(){                          
        var username=$('#uname').val();                         
        var password=$('#pass').val();

        function make_base_auth(username, password) {
              var tok = username + ':' + password;
              var hash = btoa(tok);
              return "Basic " + hash;
            }
        $.ajax
          ({
            type: "POST",
            url: "templates/login",
            dataType: 'application/json',
            beforeSend: function (xhr){ 
                xhr.setRequestHeader("Authorization" , make_base_auth(username, password)); 
            },
            success: function(){
                window.location.assign ="welcome.jsp";
            },
            error: function(data) {
                var a = JSON.parse(data.responseText);
                $("#login_msg").html("<p style='margin:3px'>" + a.message.text + "</p>");
            }
        });
    });
});    
    </script>


$（文档）.ready（函数（）{
$（“.user\u login”）。单击（函数（）{
var username=$（'#uname'）.val（）；
var password=$（'#pass'）.val（）；
函数make_base_auth（用户名、密码）{
var tok=用户名+'：'+密码；
var hash=btoa（tok）；
返回“基本”+散列；
}
$.ajax
({
类型：“POST”，
url:“模板/登录”，
数据类型：“应用程序/json”，
beforeSend:function（xhr）{
setRequestHeader（“授权”，make_base_auth（用户名、密码））；
},
成功：函数（）{
window.location.assign=“welcome.jsp”；
},
错误：函数（数据）{
var a=JSON.parse（data.responseText）；
$（“#login_msg”）.html（“”+a.message.text+””；
}
});
});
});

HTML


//你的模板
登录
在angularjs上创建web应用时使用angularjs功能和API
您可以使用jquery（包括jquery库），angularjs具有一些内置的jquery功能


var-app=angular.module（'exApp'，[]）；
app.controller（'authCtrl'，['$scope'，'authService'，函数（$scope，authService）{
var self=这个；
self.login=function（）{
authService.auth（self.username，self.password）。然后（函数（响应）{
self.message=“成功登录”；
}，函数（错误）{
self.message=“身份验证失败”；
});        
}
}]);
app.service（'authService'，函数（$http）{
this.auth=函数（用户名、密码）{
var postdata={
方法：“POST”，
url:'模板/登录'，
标题：{
“内容类型”：“应用程序/json”
},
数据：{'username'：用户名，'password'：pass}
};
返回$http.post（postdata）；
}
});

登录
{{{auth.message}
看起来很简单，替换。单击替换为ng单击，替换$。ajax
替换为$http，几乎没有其他小改动。。。你到底有什么问题？
<html ng-app="auth">
   <div data-ng-controller="AuthController as vm">

          // your template

      <form>

          <input type="text" data-ng-model="vm.username">
          <input type="password" data-ng-model="vm.password">

         <button data-ng-click="vm.login()">Login</button>
      </form

      // your template
   </div>
</html>

  var app = angular.module('auth', []);
  app.controller('AuthController', ['$scope', function($scope){

     var vm = this;

     vm.login = function() {


        function make_base_auth(username, password) {
              var tok = username + ':' + password;
              var hash = btoa(tok);
              return "Basic " + hash;
            }

        // IMPORTANT, you should move request logic to repositores, 
        // controller should only do stuff like:
        // authService.login(vm.username, vm.password).then(...)

        $.ajax
          ({
            type: "POST",
            url: "templates/login",
            dataType: 'application/json',
            beforeSend: function (xhr){ 
                xhr.setRequestHeader("Authorization" , make_base_auth(vm.username, vm.password)); 
            },
            success: function(){
                window.location.assign ="welcome.jsp";
            },
            error: function(data) {
                var a = JSON.parse(data.responseText);
                $("#login_msg").html("<p style='margin:3px'>" + a.message.text + "</p>");
            }
        });

     }


  }]);