【问题标题】：Angularjs custom headers with interceptors带有拦截器的 Angularjs 自定义标头
【发布时间】：2016-10-18 21:13:00
【问题描述】：

我正在尝试使用拦截器向我在应用程序上发出的每个请求添加自定义标头，但出现以下错误

未捕获的错误：[$injector:unpr] 未知的提供者： httpRequestInterceptorProvider

// 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'); 有任何想法吗？干杯！

【问题讨论】：

标签： angularjs ionic-framework

【解决方案1】：

问题是你在这里注入拦截器factory.$inject = ['httpRequestInterceptor']; 但httpRequestInterceptor 到底是什么？您还没有使用该名称创建任何内容。您需要做的是将下面的函数名称从 factory 更改为 httpRequestInterceptor：

function factory(httpRequestInterceptor)

并使其成为function httpRequestInterceptor()

然后将.factory(factory)替换为.factory(httpRequestInterceptor)，如果不需要注入其他任何东西，可以删除factory.$inject。

【讨论】：

【解决方案2】：

问题 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 **/
    }
})();

【讨论】：

谢谢Shashank Agrawal，你是个天才！

【解决方案3】：

我没有看到factory 和httpRequestInterceptor，您在名为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)

【讨论】：