Warum funktioniert mein AngularJS benutzerdefinierter Interceptor nicht?

Question

Ich habe diesen Artikel http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/ verfolgt, um einen Interceptor zu erstellen, der ein serverbasiertes Token zu meiner gesamten Anfrage hinzufügen könnte. Ich habe den folgenden Code in einer js-Datei gemacht. In der folgenden Datei ist SessionHolder eine Datei, die Token bei der Anmeldung speichert. aber derzeit bin ich hart codieren den Text.

(function (module) { 
    module.factory('sessionManager', ['sessionHolder', function (sessionHolder) { 
     console.log("Reached sessionManager"); 
     var sessionManager = { 
      request: function (config) { 
       //if (sessionHolder.validation_capability) { 
       config.headers['x-session-token'] = 'saurabh'; 
       config.headers['baap'] = 'saurabh';//sessionHolder.AuthorisationToken; 
       //} 
       return config; 
      } 
     }; 
     return sessionManager; 


    }]); 

}(angular.module("MarketPlan"))); 

wo "MarketPlan" ist meine ng-app.

nun in der app.js Datei, ich tue das folgende:

(function (app) { 
     app.config(function ($stateProvider, $urlRouterProvider, $mdThemingProvider, datepickerPopupConfig, datepickerConfig, $httpProvider) { 

      // override defaults for date picker 
      datepickerPopupConfig.showButtonBar = false; 
      datepickerConfig.showWeeks = false; 

//guiding initial routes 
      $urlRouterProvider.otherwise(document.cookie.indexOf('main=1') !== -1 ? '/home' : '/business'); 

//setting theme configs 
      $mdThemingProvider.definePalette('grey', { 
       '50': 'eeeeee', 
       '100': 'ffffff', 
       '200': 'ffffff', 
       '300': 'ffffff', 
       '400': 'ffffff', 
       '500': 'ffffff', 
       '600': 'ffffff', 
       '700': 'ffffff', 
       '800': 'ffffff', 
       '900': 'ffffff', 
       'A100': 'ffffff', 
       'A200': 'ffffff', 
       'A400': 'ffffff', 
       'A700': 'ffffff', 
       'contrastDefaultColor': 'dark', 
       'contrastDarkColors': ['50', '100', '200'], 
       'contrastLightColors': undefined 
      }); 

    // I am trying to push the custom interceptor here, as the article says it needs //to be done in the app config 
      $httpProvider.interceptors.push('sessionManager'); 
     }); 


    }(angular.module("MarketPlan", ["my dependencies here"]))); 

Mit diesem Code, ich bin der Unbekannte Session Provider Fehler, sobald Anwendung gestartet zu bekommen.

Ich kann nicht herausfinden, warum das passiert. Bitte beachten Sie, dass ein Interceptor (Fabrik) in Ihrer App registriert sein sollte. Der Name dieses Interceptors sollte in das $ httpProvider-Interceptor-Array in der Konfiguration (d. H. Bei Anwendungs-Bootstraps) geschoben werden.

Ist das ein richtiges Verständnis ?? Gibt es etwas, das hier nicht chronologisch gemacht wird?

Bitte führen Sie mich durch.

Answer 1

Nun, ich habe gerade festgestellt, dass ich hier einen Fehler gemacht habe. Tatsächlich folge ich einer Modul-basierten Struktur für mein Projekt, bei der alle kleinen Module als Abhängigkeiten in der Hauptanwendung (app.js-Datei) gruppiert sind.

Früher habe ich versucht, den Abfangjäger in einem solchen Modul zu registrieren. Wie es jedoch offensichtlich ist, sollte es in der Haupt-App (ng-app) registriert werden.

Deklarierung in der Haupt-App löste das Problem für mich. So jetzt geht meine app.js so:

(function (app) { 
    app.config(function ($stateProvider, $urlRouterProvider, $mdThemingProvider, datepickerPopupConfig, datepickerConfig, $httpProvider) { 

     //pushing interceptor here 
     $httpProvider.interceptors.push('sessionManager'); 

    }); 

    //declaring interceptor here 
    app.factory('sessionManager', ['sessionHolder', function (sessionHolder) { 
     console.log("Reached sessionManager"); 
     var sessionManager = { 
      request: function (config) { 
       //if (sessionService.validation_capability) { 
       config.headers['x-session-token'] = 'saurabh'; 
       config.headers['baap'] = 'saurabh';//sessionService.AuthorisationToken; 
       //} 
       return config; 
      } 
     }; 
     return sessionManager; 


    }]); 

    //declaring service to store token here 
    app.service('sessionHolder', function() { 
     console.log("Reached sessionHolder"); 
     var self = this; 
     this.validation_capability = false; 
     this.saveAuthorisationToken = function (token) { 
      self.AuthorisationToken = token; 
      self.validation_capability = true; 
     } 
    }); 

    //run function of the application 
    app.run(function ($rootScope) { 
    //runtime changes here 
    }); 

    app.controller('AppController', function() { 
    //controlled define in app, in case needed 
    }); 

}(angular.module("MarketPlan", ["my dependencies"]))); 

Das funktioniert jetzt gut. Hoffe, dass es jemandem irgendwann helfen könnte