AngularJS响应拦截器和承诺

Question

我在编码这个和让它开始工作上有困难。我不确定我做得对，也不确定我的反应数据是否正确。

它应该将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);
        }
      };
    });
  }
})();

我被告知把这一行放在检查应答是否有效，并设置令牌，但我不确定它是否正确。

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

我需要特别的帮助，以确保$rootScope.oauth数据结构被正确地忽略，并且我正在设置正确的属性。并且在responeError函数中正确地设置了承诺。并且jsonp()调用具有正确的参数。

Answer 1

您的配置函数是全局的，它可能与拦截器请求配置参数冲突。因此，让您的配置功能如下:-

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

对于拦截器，分别为拦截器提供服务，并将其推送到拦截器数组。我最近也这样做了。我在我的博客里写了所有的场景，它肯定会对你有帮助:-

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

如果你有什么问题请告诉我。

以下是tokenService实现：-

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

干杯

Answer 2

问题是，您正在尝试使用provider without injecting it. Change your `config` function definition to inject the提供程序：

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

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

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

  }