1

estou com o problema de dependência circular http no angular.

Já vi outras perguntas com assunto semelhantes, mas das formas que tentei não consegui ainda resolver o problema..

Meu Código:

var app = angular.module("app", [
    "ngRoute",
    "ngResource",
    "toastr",
    "ngStorage"    
    ]);

app.factory( "AuthService", AuthService );
app.factory( "AuthInterceptor", AuthInterceptor );


app.config(["$httpProvider", function( $httpProvider){

        $httpProvider.interceptors.push("AuthInterceptor");

}]);

app.run(function ($rootScope, $location, AuthService) {

    $rootScope.$on('$routeChangeStart', function (event, next, current) {

        if (!AuthService.getToken()) {

          $rootScope.$evalAsync(function () {
            $location.path('/signin');
          })
        }
    });

});

function AuthService($localStorage, $http, $q) {

  return {
    getToken : function () {
      return $localStorage.token;
    },
    setToken: function (token) {
      $localStorage.token = token;
    },
    login : function (data) {
      $http.post(URL+"user/login", data);
    },
    logout : function (data) {
      delete $localStorage.token;
      $q.when();
    }
  };
}



function AuthInterceptor($location, AuthService, $q ) {

  return {
    request: function(config) {
      config.headers = config.headers || {};

      if (AuthService.getToken()) {
        config.headers['Authorization'] = 'Bearer ' + AuthService.getToken();
      }

      return config;
    },

    responseError: function(response) {

      if (response.status === 401 || response.status === 403) {
        $location.path('/signin');
      }

      return $q.reject(response);
    }
  }
} 

Quando executo esse erro é apresentado,

[$injector:cdep] Circular dependency found: $http <- AuthService <- AuthInterceptor <- $http <- $templateRequest <- $route

O AuthInterceptor precisa do AuthService para configurar o header da requisição, acho que internamente ele utiliza o $http, isso justifica o erro de dependência circular.. porém eu preciso do service $http no AuthService, para realizar as requisições de Login e Logout...

Alguém pode me ajudar?

2 Respostas 2

1

@OnoSendai após refatoração com seu conselho da separação de responsabilidades, funcionou perfeitamente. Crie um AuthorizeService com getToken e setToken, e o AuthenticService que realizar login, logout.. consigo assim injetar o provider $http no AuthenticService normalmente,

No final ficou assim, compartilhando, pode ser que ajude outras pessoas,


var app = angular.module("app", [
    "ngRoute",
    "ngResource",
    "toastr",
    "ngStorage"    
    ]);

app.factory( "AuthenticService", AuthenticService );
app.factory( "AuthorizeService", AuthorizeService );
app.factory( "AuthInterceptor", AuthInterceptor );

app.config(["$httpProvider", function($httpProvider){

        $httpProvider.interceptors.push("AuthInterceptor");

}]);

app.run(function ($rootScope, $window, AuthorizeService) {
   $rootScope.$on('$routeChangeStart', function (event, next, current) {
        if (!AuthorizeService.getToken()  ) {

            event.preventDefault();

            $rootScope.$evalAsync(function () {            
                $window.location.href = "/login.php";            
            });
        };  

    });

});

function AuthenticService($localStorage, AuthorizeService, $http, $q) {

  return {
    login : function (data) {
      $http.post(URL+"auth/login", data)
      .then(function(data){

            var result = null;

            if (data && data.data instanceof Object) {

                result = data.data;

                if ( result["success"] ) {

                    $localStorage.token = result["token"]; 
                    $window.location.href = '/projeto/frontend/';
                    AuthorizeService.setToken(data.data);

                } else if ( result["error"] ) {

                    alert("Não foi possível autenticar, " + result["msg"] );

                } else {

                    alert("Ocorreu um erro no servidor" );
                }
            }   

      });
    },

    logout : function (data) {
      delete $localStorage.token;
      $q.when();
    }
  };
}


function AuthorizeService($localStorage, $window, $q) {

  return {

    getToken : function () {
      return $localStorage.token;
    },

    setToken: function (data) {         
        if (data instanceof Object) {
            if ( data["success"] ) {
                $localStorage.token = data["token"]; 
                $window.location.href = '/projeto/frontend/';

            } else if ( data["error"] ) {
                alert("Não foi possível autenticar, " + data["msg"] );
            } else {
                alert("Erro" );
            }
        }          
    }

  };
}

function AuthInterceptor($location, AuthorizeService, $q ) {

  return {

    request: function(config) {
      config.headers = config.headers || {};

      if (AuthorizeService.getToken()) {
        config.headers['Authorization'] = AuthorizeService.getToken();
      }

      return config;
    },

    responseError: function(response) {

      if (response.status === 401 || response.status === 403) {
        $location.path('/signin');
      }

      return $q.reject(response);
    }
  }
}


Muito obrigado parceiro!

0

AuthService possui um método, login(), que não é utilizado em nenhuma parte do código. É também o único trecho que utiliza o provider $http.

Solução: Remova, de AuthService, a injeção do serviço $http e a função login().

2
  • Oi boa tarde, sim .. remover o login com o $http é uma solução, mas dai eu teria que fazer o login a partir de outro ponto, não podendo então concentrar esse tipo de requisição ( login, logou ) na mesma factory.. mas obrigado pela resposta, acho que vou optar por isso mesmo.. 15/02/2017 às 19:04
  • @FabioMoura são dois escopos diferentes, autorização e autenticação. Você pode ter um serviço de autenticação com os métods de sign in e sign out, e outro de autorização que verifica se o token está carregado e válido. Amarre o serviço de autenticação a uma rota/estado, e configure o interceptor para ignorar os endpoints necessários.
    – OnoSendai
    15/02/2017 às 19:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .