2016-06-03 5 views
0

이 코드를 코딩하고 작동시키는 데 문제가 있습니다. 나는 약속을 올바르게했는지 또는 응답 데이터인지 확신하지 못한다.AngularJS 응답 인터셉터 및 약속

모든 요청에 ​​access_token을 추가하고 401에 대한 모든 응답 오류를 확인한 다음 토큰을 새로 고치고 새 토큰을 얻지 못하면 다시 시도해야합니다. 여기

는 관련 코드 하단을 확인, 경로 파일입니다

(function() { 
    'use strict'; 

    angular 
    .module('sawebpanel.routes') 
    .config(config); 

    config.$inject = ['$routeProvider', '$httpProvider']; 

    /** 
    * @name config 
    * @desc Define valid application routes 
    */ 
    function config($routeProvider, $httpProvider) { 
    $routeProvider.when('/home', { 
     controller: 'IndexController', 
     controllerAs: 'vm', 
     templateUrl: '/static/templates/layout/index.html' 
    }).when('/accounts/register', { 
     controller: 'RegisterController', 
     controllerAs: 'vm', 
     templateUrl: '/static/templates/authentication/register.html' 
    }).when('/accounts/login', { 
     controller: 'LoginController', 
     controllerAs: 'vm', 
     templateUrl: '/static/templates/authentication/login.html' 
    }).when('/accounts/+:username', { 
     controller: 'AccountController', 
     controllerAs: 'vm', 
     templateUrl: '/static/templates/accounts/account.html' 
    }).when('/accounts/+:username/settings', { 
     controller: 'AccountSettingsController', 
     controllerAs: 'vm', 
     templateUrl: '/static/templates/accounts/settings.html' 
    }).when('/accounts/+:username/profile', { 
     controller: 'AccountProfileController', 
     controllerAs: 'vm', 
     templateUrl: '/static/templates/accounts/profile.html' 
    }); 

    $httpProvider.interceptors.push(function($rootScope, $q, $injector, $location) { 
     return { 
     'request': function(config) { 

      config.headers['Authorization'] = "Bearer " + $rootScope.oauth.access_token; 
      return config; 
     }, 

     'responseError': function(response) { 
      if (response.status === 401) { 
      var deferred = $q.defer(); 
      params = JSON.stringify({ 
       refresh_token: $rootScope.oauth.refresh_token, 
       client_id: $rootScope.oauth.client_id, 
       client_secret: $rootScope.oauth.client_secret, 
       grant_type: "password" 
      }); 
      $injector.get("$http").jsonp('/api/v1/auth/token?' + params).then(function($refreshResponse) { // try to refresh token 
       if (refreshResponse.data) { 
       $rootScope.oauth = angular.fromJson($refreshResponse.data); // set oauth data 

       $injector.get("$http")(response.config).then(function(response) { 
        deferred.resolve(response); 
       }, function(response) { 
        deferred.reject(); // no data in response 
       }); 
       } else { 
       deferred.reject(); 
       } 
      }, function(response) { 
       params = JSON.stringify({ 
       client_id: $rootScope.oauth.client_id, 
       client_secret: $rootScope.oauth.client_secret, 
       grant_type: "password" 
       }); 
       $injector.get("$http").jsonp('/api/v1/auth/token?' + params).then(function($loginResponse) { // try for a new token 
       if ($loginResponse.data) { 
        $rootScope.oauth = angular.fromJson($loginResponse.data); // set oauth data 

        $injector.get("$http")(response.config).then(function(response) { 
        deferred.resolve(response); 
        }, function(response) { 
        deferred.reject(); 
        }); 
       }, else { 
        deferred.reject(); // no data in response 
       } 
       }, function(response) { 
       deferred.reject(); 
       $location.path('/accounts/login'); // give up and redirect to login 
       return; 
       }); 
      }); 
      return deferred.promise; 
      } 
      return $q.reject(response); 
     } 
     }; 
    }); 
    } 
})(); 

나는 respone이 일 경우 확인하는이 라인을 넣어 토큰을 설정 들었다하지만 난 잘 모르겠어요 맞아.

$injector.get("$http")(response.config).then(function(response) { 
        deferred.resolve(response); 
       }, function(response) { 
        deferred.reject(); 
       }); 

저는 $ rootScope.oauth 데이터 구조가 정확하게 delcared되었는지, 그리고 속성을 올바르게 설정했는지 확인하는 데 도움이 필요합니다. 그리고 약속은 responeError 함수에서 올바르게 설정되었습니다. 그리고 jsonp() 호출에는 올바른 인수가 있습니다.

답변

2

구성 기능이 전역이며 인터셉터 요청 구성 매개 변수와 충돌 할 수 있습니다. 인터셉터를 들어

angular 
    .module('sawebpanel.routes').config(function(){ 
     //Your code... 
    }); 

인터셉터 seprately 서비스를하고 인터셉터 배열에 밀어 .. 나는 최근 같은 구현 -이 : 그래서 당신은 설정 기능을 같이합니다. 내 블로그에있는 모든 시나리오를 쓴, 그것은 확실히 당신을하는 데 도움이됩니다 -

http://www.codemosquitoes.com/2016/06/using-angularjs-interceptors-with-http.html

당신이 어떤 질문이 있으면 알려주세요. 여기

는 tokenService 구현입니다 : - 문제는 당신이 provider without injecting it. Change your `config` function definition to inject the 공급자를 사용하려고하는 것입니다

angular.module("app").service('tokenService', ["$cookies", "$injector", "$q", function ($cookies, $injector, $q) { 
var services = {}; 

services.tokenValue = function() { 
    return $cookies.get('token'); 
}; 

services.setTokenCookie = function (key, value) { 
    var expireDate = new Date(); 
    expireDate.setDate(expireDate.getDate() + 1); 
    $cookies.put(key, value, { 'expires': expireDate, path: '/' }); 
} 

services.refreshToken = function (isAuth) { 
    var deferred = $q.defer(); 
    $http = $injector.get('$http'); 
    $http.get('urlForGettingTokenApi').success(function (data, status, headers, config) { 
     deferred.resolve(data); 
    }).error(function (data, status, headers, config) { 
     deferred.resolve("Error"); 
    }); 
    return deferred.promise; 
}; 

return services; 
}]); 

건배

+0

그럼 난 이미 하나의 설정 기능이 . 나는 그저 저의 인터셉터를 설치하겠습니까? 또한 tokenService는 어디에 정의합니까? – shenk

+0

나는 귀하의 게시물을 읽었으며 큰 도움이되었습니다. 하지만 몇 가지 질문이 있습니다. 응답 및 요청을 위해 별도의 인터셉터가 필요합니까? 아니면 동일한 기능에 responseError와 request를 넣을 수 있습니까? 내 다른 질문은 oauth 데이터를 저장하는 것입니다. $ rootScope.oauth.data를 사용하고 있지만 올바르게 사용하고 있는지 확실하지 않습니다. tokenService를 정의/설정하는 방법이나 $ rootScope.oauth를 설정하는 방법에 대한 예를 들어 주시겠습니까? – shenk

+0

이미 가지고있는 동일한 설정 섹션에서 인터셉터를 설정할 수 있습니다. 또한 responseError를 넣고 같은 인터셉터에 요청할 수 있습니다. oauth 데이터를 저장하는 데는 $ rootScope를 사용할 수 있습니다. 문제는 없을 것이라고 생각합니다. 그러나 responseError : - – CuriousGeek

0

:

angular 
    .module('sawebpanel.routes') 
    .config(config); 

    config.$inject = ['$routeProvider', '$httpProvider']; 

    /** 
    * @name config 
    * @desc Define valid application routes 
    */ 
    function config($routeProvider, $httpProvider) { 

    } 
+0

그래서 2 개의 구성 함수를 가지고 있는데, 하나의 인터셉터로 옮길 수 있습니까? 아니면 모듈에서 2 개의 config 함수를 호출 할 수 있습니까? – shenk

+0

업데이트 된 코드 예제를 참조하십시오. 또한 $ rootScope를 올바르게 사용하고 있습니까? 나는 oauth 데이터를 저장하기 위해 데이터 구조를 설정하는 것과 혼동을 느낀다. – shenk

+0

체인 방식이나 여러 파일에서 원하는 수의 구성을 사용할 수 있습니다. 두 번째 질문에 대해서는 –

관련 문제