angularjs - 将 $route 注入 http 拦截器

Question

我正在尝试将自定义标头注入每个 API 请求。当我提供一些硬编码文本时，它可以工作。

工作代码

myApp.config(['$httpProvider', function ($httpProvider) {
    var requestInterceptor = ['$q', '$rootScope', 
        function ($q, $rootScope) {
            var interceptorInstance = {
                request: function (config) {
                    config.headers['X-MyApp-CustomHeader'] = "foobar"; 
                    return config || $q.when(config);
                }
            };
            return interceptorInstance;
        }];

    $httpProvider.interceptors.push(requestInterceptor);
}]);

不工作的代码

myApp.config(['$httpProvider', function ($httpProvider) {
    var requestInterceptor = ['$q', '$rootScope', '$route',
        function ($q, $rootScope, $route ) {
            var interceptorInstance = {
                request: function (config) {
                    config.headers['X-MyApp-CustomHeader'] = $route.current.params.CustomParameter; 
                    return config || $q.when(config);
                }
            };
            return interceptorInstance;
        }];

    $httpProvider.interceptors.push(requestInterceptor);
}]);

错误，尝试注入时$route

未捕获的错误：[$injector:cdep] 找到循环依赖项：$route <- $http http://errors.angularjs.org/1.2.3/ $injector/cdep?p0=%24route%20%3C-%20% 24http

Answer 1

这是一个已知问题。

看看我的回答： 有没有办法为拦截器请求 $http？

$route取决于$httpwhich 又取决于拦截器：

myApp.config(['$httpProvider', function ($httpProvider) {
    var requestInterceptor = ['$q', '$rootScope', '$injector',
        function ( $q, $rootScope, $injector ) {
            var interceptorInstance = {
                request: function (config) {
                    var $route = $injector.get('$route');
                    config.headers['X-MyApp-CustomHeader'] = $route.current.params.CustomParameter; 
                    return config || $q.when(config);
                }
            };
            return interceptorInstance;
        }];

    $httpProvider.interceptors.push(requestInterceptor);
}]);

什么是 $injector？

• 您必须阅读文档
• 看看这个很棒的教程

$injector 用于检索由 provider 定义的对象实例、实例化类型、调用方法和加载模块。

在内部，angular.js 将使用 $injector 调用您的方法（配置/运行块）并注入所有依赖项。这会自动发生，因此您很少需要担心它。如果 $injector 无法解决您的依赖关系，您可以手动进行。