带有拦截器的Angularjs自定义标头

时间:2016-10-18 12:48:47

标签: angularjs ionic-framework

我正在尝试使用拦截器为我在应用上发出的每个请求添加一个自定义标头,我收到以下错误

  

未捕获错误:[$ injector:unpr]未知提供商:   httpRequestInterceptorProvider< - httpRequestInterceptor< - $ http< -   $ templateFactory< - $ view< - $ state

// Ionic Starter App
(function () {

    'use strict';

    var app = angular
            .module('app', ['ionic', 'auth0.lock', 'angular-jwt'])
            .config(config)
            .factory(factory)

    factory.$inject = ['httpRequestInterceptor'];
    config.$inject = ['$stateProvider', '$urlRouterProvider', 'lockProvider', 'jwtOptionsProvider', '$httpProvider'];

    function factory(httpRequestInterceptor) {
        return {
            request: function (config) {
                config.headers['X-switch-using'] = isApple;
                return config;
            }
        }
    }

    function config($stateProvider, $urlRouterProvider, lockProvider, jwtOptionsProvider, $httpProvider) {
        $stateProvider

        // setup an abstract state for the tabs directive
                .state('app', {
                    url: '/app',
                    abstract: true,
                    templateUrl: 'components/menu/menu.html',
                })
                .state('app.home', {
                    url: '/home',
                    views: {
                        'menuContent': {
                            templateUrl: 'components/home/home.html'
                        }
                    }
                })
                .state('app.dashboard', {
                    url: '/dashboard',
                    views: {
                        'menuContent': {
                            templateUrl: 'components/template/template.html'
                        }
                    }
                })
                .state('app.signin', {
                    url: '/login',
                    views: {
                        'menuContent': {
                            templateUrl: 'components/login/login.html'
                        }
                    }
                });

        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/app/home');
        $httpProvider.interceptors.push('httpRequestInterceptor');

        lockProvider.init({
            clientID: AUTH0_CLIENT_ID,
            domain: AUTH0_DOMAIN,
            options: {
                auth: {
                    redirect: false,
                    params: {
                        scope: 'openid',
                        device: 'Mobile device'
                    }
                }
            }
        });

        // Configuration for angular-jwt
        jwtOptionsProvider.config({
            tokenGetter: function () {
                return localStorage.getItem('id_token');
            },
            whiteListedDomains: ['localhost'],
            unauthenticatedRedirectPath: '/login'
        });
    }
})();

当我尝试$httpProvider.interceptors.push('httpRequestInterceptor');时 有任何想法吗?干杯!

3 个答案:

答案 0 :(得分:2)

问题是你在这里注入拦截器class MySpider(Spider): name = 'spider' def parse(self,response): #.... 但是factory.$inject = ['httpRequestInterceptor'];究竟是什么?你没有用这个名字创建任何东西。 您需要做的是将以下函数名称从httpRequestInterceptor更改为httpRequestInterceptor

factory

并将其设为function factory(httpRequestInterceptor)

然后将function httpRequestInterceptor()替换为.factory(factory),如果您不需要注入任何其他内容,则可以删除.factory(httpRequestInterceptor)

答案 1 :(得分:1)

问题1

第一个问题是您的应用中没有依赖项,例如httpRequestInterceptor

问题2

第二个主要问题是您无法在Angular的配置阶段注入简单的工厂或服务。

来自docs

  

只能将提供程序和常量注入配置中   块。这是为了防止之前意外实例化服务   它们已经完全配置好了。

因此,请考虑更改您的代码:

// Ionic Starter App
(function () {

    'use strict';

    var app = angular
            .module('app', ['ionic', 'auth0.lock', 'angular-jwt'])
            .config(config)
            //.factory(factory)             // Removed factory

    config.$inject = ['$stateProvider', '$urlRouterProvider', 'lockProvider', 'jwtOptionsProvider', '$httpProvider'];

    function factory() {
        return {
            request: function (config) {
                config.headers['X-switch-using'] = isApple;
                return config;
            }
        }
    }

    function config($stateProvider, $urlRouterProvider, lockProvider, jwtOptionsProvider, $httpProvider) {
        /** your state configuration here **/

        $httpProvider.interceptors.push(factory);

        /** your lockprovider and jwtOptionsProvider here **/
    }
})();

答案 2 :(得分:0)

我在factory名为httpRequestInterceptor的{​​{1}}中注明了factory factory httpRequestInterceptor。如果工厂app完全是另一个模块,那么您已将该模块作为依赖项注入var app = angular .module('app', ['ionic', 'auth0.lock', 'angular-jwt','inject the module which has the httpRequestInterceptor factory']) .config(config) .factory(factory) 模块。

acronym_list
相关问题