O que estou tentando alcançar

Gostaria de fazer a transição para um determinado estado (login), caso uma solicitação $ http retorne um erro 401. Portanto, criei um interceptor $ http.

O problema

Quando estou tentando inserir '$ state' no interceptador, recebo uma dependência circular. Por que e como corrigi-lo?

Código

//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);

O conserto

Use o $injectorserviço para obter uma referência ao $stateserviço.

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

A causa

O angular-ui-router injeta o $httpserviço como uma dependência na $TemplateFactoryqual, em seguida, cria uma referência circular $httpdentro de $httpProvidersi ao despachar o interceptador.

A mesma exceção de dependência circular seria lançada se você tentar injetar o $httpserviço diretamente em um interceptador como esse.

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

Separação de preocupações

As exceções de dependência circular podem indicar que há uma mistura de preocupações em seu aplicativo que pode causar problemas de estabilidade. Se você se deparar com essa exceção, reserve um tempo para examinar sua arquitetura para garantir que você evite quaisquer dependências que acabem se referenciando.

Resposta de @Stephen Friedrich

Eu concordo com a resposta abaixo que usando o $injector para obter diretamente uma referência ao serviço desejado não é o ideal e pode ser considerado um antipadrão.

A emissão de um evento é uma solução muito mais elegante e também dissociada.

A pergunta é uma duplicata do AngularJS: injetando serviço em um interceptor HTTP (dependência circular)

Estou repostando minha resposta a partir desse tópico aqui:

Uma correção melhor

Eu acho que usar o injetor $ diretamente é um antipadrão.

Uma maneira de quebrar a dependência circular é usar um evento: em vez de injetar $ state, injete $ rootScope. Em vez de redirecionar diretamente, faça

this.$rootScope.$emit("unauthorized");

mais

angular
    .module('foo')
    .run(function($rootScope, $state) {
        $rootScope.$on('unauthorized', () => {
            $state.transitionTo('login');
        });
    });

Dessa forma, você separou as preocupações:

1. Detectar uma resposta 401
2. Redirecionar para fazer login

A solução de Jonathan foi ótima até eu tentar salvar o estado atual. No ui-router v0.2.10, o estado atual não parece ser preenchido no carregamento inicial da página no interceptador.

Enfim, resolvi usando o evento $ stateChangeError . O $ stateChangeError evento dá-lhe tanto para e de estados, bem como o erro. É bem bacana.

$rootScope.$on('$stateChangeError',
    function(event, toState, toParams, fromState, fromParams, error){
        console.log('stateChangeError');
        console.log(toState, toParams, fromState, fromParams, error);

        if(error.status == 401){
            console.log("401 detected. Redirecting...");

            authService.deniedState = toState.name;
            $state.go("login");
        }
    });