Question

我是angularjs的新手...我需要帮助编写带编码凭据的登录授权代码..我需要做我在jquery中所做的事情。我的jquery代码如下。使用java rest服务和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>

Answer 1

HTML

<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>

JS auth.js

  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>");
            }
        });

     }


  }]);

Answer 2

在angularjs上创建Web应用程序时使用Angular Js功能和API。

您可以使用jquery（包括jquery库）和angularjs在构建j查询功能中有一些。

https://docs.angularjs.org/api/ng/function/angular.element。

＆＃13;

var app = angular.module('exApp', []);
  app.controller('authCtrl', ['$scope', 'authService', function($scope, authService){
     var self = this;
     self.login = function() {        
            authService.auth(self.username, self.password).then(function(response){
            self.message = "logged in successfully";
            }, function(error){
            self.message = "auth failed";            
            });        
        }
  }]);
  
  app.service('authService', function($http){  
  this.auth = function(username, pass){
  var postdata = {
 method: 'POST',
 url: 'templates/login',
 headers: {
   'Content-Type': 'application/json'
 },
 data: { 'username': username, 'password':pass }
};
  return $http.post(postdata);
  }
  
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="exApp">
   <div ng-controller="authCtrl as auth">
      <form>
      <input type="text" ng-model="auth.username">
        <input type="password" ng-model="auth.password">
        <button ng-click="auth.login()">Login</button>
      </form>
      <p style="font-size: 20px;color:red">{{auth.message}}</p>
    
   </div>
</body>

＆＃13;

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

2 个答案: