为什么我的 AngularJS 自定义拦截器不起作用

Question

我一直在关注这篇文章http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/ 来制作一个拦截器，它可以为我的所有请求添加一个基于服务器的令牌。我在 js 文件中编写了以下代码。在下面的文件中，SessionHolder 是一个在登录时存储令牌的文件。但目前我正在对文本进行硬编码。

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

“MarketPlan”是我的 ng-app。

现在在 app.js 文件中，我正在执行以下操作：

    (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"])));

使用此代码，我会在应用程序启动后立即收到 Unknown Session Provider 错误。

我无法弄清楚为什么会发生这种情况。仅供参考，我的理解是拦截器（工厂）应该在您的应用程序中注册。这个拦截器的名字应该被推入配置中的 $httpProvider 拦截器数组中（即当应用程序启动时）。

这是正确的理解吗？？这里有没有按时间顺序完成的事情。

请指导我。

Answer 1

好吧，我刚刚意识到我在这里犯了一个错误。实际上，我正在为我的项目遵循基于模块的结构，其中所有小模块都被分组为主应用程序（app.js 文件）中的依赖项。

之前，我尝试在一个这样的模块中注册拦截器。但是，很明显，它应该在主应用程序（ng-app）中注册。

在主应用程序中声明它们为我解决了这个问题。所以现在我的 app.js 是这样的：

(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"])));

现在工作正常。希望有一天它可以帮助某人