注射$状态（UI路由器）到$ HTTP拦截导致循环依赖 [英] Injecting $state (ui-router) into $http interceptor causes circular dependency

问题描述

我试图实现

我想情况下过渡到一定境界（登录）的$ http请求返回401错误。因此，我创建了一个$ HTTP拦截器。

问题

当我试图插入'$状态进入拦截我得到一个循环依赖。为什么和如何解决呢？

code

  //内部配置功能    VAR拦截='$的位置，$ Q'，'$州'，函数（$位置，$ Q $州）{
        函数成功（响应）{
            返回响应;
        }        功能错误（响应）{            如果（response.status === 401）{
                $ state.transitionTo（'public.login'）;
                返回$ q.reject（响应）;
            }
            其他{
                返回$ q.reject（响应）;
            }
        }        复位功能（承诺）{
            返回promise.then（成功，错误）;
        }
    }];    $ httpProvider.responseInterceptors.push（拦截）;
 

解决方案

的修复

使用 $注射器服务才能到 $状态服务的引用。

  VAR拦截='$的位置，$ Q'，'$喷油器'功能（$位置，$ Q $喷油器）{
    函数成功（响应）{
        返回响应;
    }    功能错误（响应）{        如果（response.status === 401）{
            $ injector.get（'$状态'）transitionTo（'public.login'）。
            返回$ q.reject（响应）;
        }
        其他{
            返回$ q.reject（响应）;
        }
    }    复位功能（承诺）{
        返回promise.then（成功，错误）;
    }
}];$ httpProvider.responseInterceptors.push（拦截）;
 

的原因

角UI路由器注入的 $ HTTP 服务作为依赖， $ TemplateFactory 然后创建 $ HTTP > $ httpProvider 本身在调度拦截器。

如果您尝试直接注入 $ HTTP 服务到像这样一个拦截器同样的循环依赖异常将会被抛出。

  VAR拦截='$的位置，$ Q，$ HTTP'，函数（$位置，$ Q $ HTTP）{
 

关注点分离

循环依赖异常可能表明，有你的应用程序中的担忧，可能导致稳定性问题混合。如果你发现自己与此异常，你应该花时间去看看你的架构，以确保您避免最终引用自己的依赖。

What I'm trying to achieve

I would like to to transition to a certain state (login) in case an $http request returns a 401 error. I have therefore created an $http interceptor.

The problem

When I am trying to insert '$state' into the interceptor I get a circular dependency. Why and how do i fix it?

Code

//Inside Config function

    var interceptor = ['$location', '$q', '$state', function($location, $q, $state) {
        function success(response) {
            return response;
        }

        function error(response) {

            if(response.status === 401) {
                $state.transitionTo('public.login');
                return $q.reject(response);
            }
            else {
                return $q.reject(response);
            }
        }

        return function(promise) {
            return promise.then(success, error);
        }
    }];

    $httpProvider.responseInterceptors.push(interceptor);

解决方案

The Fix

Use the $injector service to get a reference to the $state service.

var interceptor = ['$location', '$q', '$injector', function($location, $q, $injector) {
    function success(response) {
        return response;
    }

    function error(response) {

        if(response.status === 401) {
            $injector.get('$state').transitionTo('public.login');
            return $q.reject(response);
        }
        else {
            return $q.reject(response);
        }
    }

    return function(promise) {
        return promise.then(success, error);
    }
}];

$httpProvider.responseInterceptors.push(interceptor);

The Cause

angular-ui-router injects the $http service as a dependency into $TemplateFactory which then creates a circular reference to $http within the $httpProvider itself upon dispatching the interceptor.

The same circular dependency exception would be thrown if you attempt to inject the $http service directly into an interceptor like so.

var interceptor = ['$location', '$q', '$http', function($location, $q, $http) {

Separation of Concerns

Circular dependency exceptions can indicate that there is a mixing of concerns within your application which could cause stability issues. If you find yourself with this exception you should take the time to look at your architecture to ensure you avoid any dependencies that end up referencing themselves.

这篇关于注射$状态（UI路由器）到$ HTTP拦截导致循环依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！