0

Je suis en train de créer un intercepteur AngularJS en utilisant à peu près la recette à ce lien - https://thinkster.io/interceptorsQuand un intercepteur AngularJS est-il appelé?

Mon code est ci-dessous -

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

<p>Today's welcome message is:</p> 

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

</div> 

<p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome" variable.</p> 

<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $http) { 
    $http.get("welcome.htm") 
    .then(function(response) { 
     $scope.myWelcome = response.data; 
    }); 
}); 


function tokenInterceptor() { 
    return { 
     request: function(config) { 
      config.xsrfHeaderName = 'myToken';       
      config.headers['myToken'] = "HelloWorld"; 
      return config; 
     }, 

     requestError: function(config) { 
      return config;      
     }, 

     response: function(config) { 
      return config;      
     }, 

     responseError: function(config) { 
      return config;      
     }     
    }    
} 

app 
.factory('tokenInterceptor', tokenInterceptor) 
.config(function($httpProvider) { 
    $httpProvider.interceptors.push('tokenInterceptor');     
}).run(function($http) { 
    $http.get('http://127.0.0.1:8082/customURL.htm') 
.then(function(res) { 
    console.log("get request to google");     
}); 
});    

</script> 

<a href="http://www.google.com">GOOGLE</a> 

</body> 
</html> 

Le code à l'intérieur fonction tokenInterceptor ne fonctionne que lorsque le $ http.get (» http://127.0.0.1:8082/customURL.htm ') appel à l'intérieur de factory.config.run est exécuté. Comment faire exécuter le code quand une requête HTTP est faite? - par exemple lorsque le lien vers Google sur cette page est exécutée -

<a href="http://www.google.com">GOOGLE</a> 
+2

Un intercepteur http $ est appelée lorsqu'une demande est faite grâce au service http angulaire. Un lien pointant vers google ne fait pas une requête AJAX, et encore moins via le service angulaire $ http. –

Répondre

0

C'est par exemple très difficile, mais vous pouvez comprendre l'idée principale:

//app.js 
      angular.module('testApp', []) 
      .config(function($httpProvider) { 
       $httpProvider.interceptors.push('myInterceptor'); 
      }) 
      .factory('myInterceptor', function($q) { 
       var myInterceptor = { 
        request: (config)=>{ console.log('myInterceptor request'); return config;}, 
        response: (response)=>{ console.log('myInterceptor response'); return response;}, 
        requestError: (rejectReason)=>{ console.log('myInterceptor requestError'); return $q.reject(rejectReason);}, 
        responseError: (response)=>{ console.log('myInterceptor responseError'); return $q.reject(response);} 
       }; 
       return myInterceptor; 
      }) 
      .controller('mainController', function($scope, $http){ 
      $scope.funcGet =()=>{ 
       $http.get('http://www.google.com') 
       .then(function (response) { 
        console.log('resonce - ', responce); 
       }); 
      } 
     }) 

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

    <script src="app.js"></script> 
     <body> 

     <div ng-app="testApp" ng-controller="mainController"> 
      <input type="button" value="Go" ng-click="funcGet()"> 
     </div> 
     </body> 
     </html>