如何在angularjs中使用url进行身份验证

时间:2017-03-03 06:24:23

标签: javascript angularjs

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 



<h1>{{myWelcome}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http,Base64) {
$http.defaults.headers.common = {"Access-Control-Request-Headers": "accept, origin, authorization"}; 
$http.defaults.headers.common['Authorization'] = 'Basic ' + Base64.encode('admin' + ':' + 'admin');
$http({ method : "GET",
    url : "http://10.132.32.212:8181/restconf/operational/network-topology:network-topology/",
    Accept: "application/json",
    withCredentials: true,
    }).then(function mySucces(response) {
      $scope.myWelcome = response.data;
    }, function myError(response) {
      $scope.myWelcome = response.statusText;
  });
});
</script>
</body>
</html>

这是我的代码,但我没有得到任何响应数据。我认为它没有使用网址进行身份验证。我可以得到任何解决方案

2 个答案:

答案 0 :(得分:0)

您使用了未定义的Base64服务。 我把它添加为CDN库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-base64/2.0.5/angular-base64.js"></script>

并在app声明中包含该服务:

var app = angular.module('myApp', ['base64']);

结果

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-base64/2.0.5/angular-base64.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 



<h1>{{myWelcome}}</h1>

</div>

<script>
var app = angular.module('myApp', ['base64']);
app.controller('myCtrl', function($scope, $http, $base64) {
$http.defaults.headers.common = {"Access-Control-Request-Headers": "accept, origin, authorization"}; 
$http.defaults.headers.common['Authorization'] = 'Basic ' + $base64.encode('admin' + ':' + 'admin');
$http({ method : "GET",
    url : "http://10.132.32.212:8181/restconf/operational/network-topology:network-topology/",
    Accept: "application/json",
    withCredentials: true,
    }).then(function mySucces(response) {
      $scope.myWelcome = response.data;
    }, function myError(response) {
      $scope.myWelcome = response.statusText;
  });
});
</script>
</body>
</html>

Plunker:https://plnkr.co/edit/eYJopsNPe8Iqb56arC75?p=preview

从您的服务器(http://10.132.32.212:8181)加载此代码,您就可以开始使用了。

答案 1 :(得分:0)

&#13;
&#13;
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-base64/2.0.5/angular-base64.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>

    <body>

    <div ng-app="list">
    <div ng-controller="ListCtrl">
           
    <div ng-repeat='data1 in data["network-topology"].topology'>
          {{data1["topology-id"]}}
            <div ng-repeat='data2 in data1.node'>
               {{data2["node-id"]}}
     <div ng-repeat='data3 in data2["termination-point"]'>
              {{data3["tp-id"]}}
            </div>
          </div>
        </div>
    </div>
</div>
    <script>
var app = angular.module('list', ['base64']);
app.controller('ListCtrl', function($scope, $http, $base64) {

   $http.defaults.headers.common = {"Access-Control-Request-Headers": "accept, origin, authorization"}; 
   $http.defaults.headers.common['Authorization'] = 'Basic ' + $base64.encode('admin' + ':' + 'admin');

 $http({
   method: 'GET',
   url: 'http://10.132.32.212:8181/restconf/operational/network-topology:network-topology/',
   contentType: 'application/json; charset=utf-8',
 }).success(function(tdata) {
   $scope.data= tdata;
  
      });

     });
 

</script>
</body>
</html>
&#13;
&#13;
&#13;