Angular http拦截器配置

Question

我正在离子建立一个项目，我需要发送每个请求jwt令牌。我是一个总角度新手，我想知道我需要放置http拦截器的逻辑。我应该在哪里做，我应该把它放在配置部分，做一个新的服务或其他东西？

这是拦截逻辑我需要插入：

$httpProvider.interceptors.push(['$q', '$location', '$localStorage', function ($q, $location, $localStorage) { 
    return { 
     'request': function (config) { 
      config.headers = config.headers || {}; 
      if ($localStorage.token) { 
       config.headers.Authorization = 'Bearer ' + $localStorage.token; 
      } 
      return config; 
     }, 
     'responseError': function (response) { 
      if (response.status === 401 || response.status === 403) { 
       $location.path('/signin'); 
      } 
      return $q.reject(response); 
     } 
    }; 
}]); 

这是配置的一部分，我app.js：我已经添加它services.js这样

.config(function($stateProvider, $urlRouterProvider, $authProvider, ApiEndpoint) { 

    $authProvider.loginUrl = ApiEndpoint.url + '/authenticate'; 

    $stateProvider 
    .state('main', { 
    url: '/main', 
    abstract: true, 
    templateUrl: 'templates/main.html' 
    }) 

    .state('main.auth', { 
    url: '/auth', 
    views: { 
     'content': { 
     templateUrl: 'templates/login.html', 
     controller: 'AuthController' 
     } 
    } 
    }) 

    .state('main.front', { 
    url: '/front', 
    views: { 
     'content': { 
     templateUrl: 'templates/main-front.html', 
     controller: 'FrontPageController' 
     } 
    } 
    }) 

    .state('main.article', { 
    url: '/article/{id}', 
    views: { 
     'content': { 
     templateUrl: 'templates/main-article.html', 
     controller: 'ArticleController' 
     } 
    } 
    }); 

    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/main/front'); 
}); 

，我想知道这是否正确？

更新代码

services.js在app.js

angular.module('coop.services', []) 

.factory('ArticleService', function($http, ApiEndpoint) { 

    return { 
    all: function() { 
     return $http.get(ApiEndpoint.url + "/articles/latest").then(function(response){ 
      articles = response.data; 
      return articles; 
      }); 
     }, 
    get: function(id) { 
     return this.all().then(function(response) { 
     var articles = response; 
     for (var i in articles) { 
      if (articles[i].id == id) { 
      return articles[i]; 
      } 
     } 
     return {}; 
     }) 
    } 
    }; 
}) 

.factory('AuthenticationInterceptor', function RequestInterceptor($q, $location, $localStorage, $rootScope, CoreConfig) { 
    var service = this; 

    service.request = function (config) { 
     config.headers = config.headers || {}; 
     if ($localStorage.token) { 
      config.headers.Authorization = 'Bearer ' + $localStorage.token; 
     } 
     return config; 
    }; 

    service.responseError = function (response) { 
     if (response.status === 401 || response.status === 403) { 
      $location.path('/signin'); 
     } 
     return $q.reject(response); 
    }; 

    return service; 
}); 

的.config部分：

.config(function($stateProvider, $urlRouterProvider, $authProvider, ApiEndpoint, $httpProvider) { 

    $httpProvider.interceptors.push('AuthenticationInterceptor'); 
    $authProvider.loginUrl = ApiEndpoint.url + '/authenticate'; 

    $stateProvider 
    .state('main', { 
    url: '/main', 
    abstract: true, 
    templateUrl: 'templates/main.html' 
    }) 

    .state('main.auth', { 
    url: '/auth', 
    views: { 
     'content': { 
     templateUrl: 'templates/login.html', 
     controller: 'AuthController' 
     } 
    } 
    }) 

    .state('main.front', { 
    url: '/front', 
    views: { 
     'content': { 
     templateUrl: 'templates/main-front.html', 
     controller: 'FrontPageController' 
     } 
    } 
    }) 

    .state('main.article', { 
    url: '/article/{id}', 
    views: { 
     'content': { 
     templateUrl: 'templates/main-article.html', 
     controller: 'ArticleController' 
     } 
    } 
    }); 

    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/main/front'); 
}); 

Answer 1

拦截器在所述引导阶段通常被配置。
我倾向于处理它的应用程序配置下：

appName.config(["$httpProvider", ($httpProvider: ng.IHttpProvider) => { 
       $httpProvider.interceptors.push(() => { 

       // Your interceptor's logic here 

      }); 
     }); 

Answer 2

"An interceptor is simply a factory()服务，与4个属性映射到功能”返回一个对象，所以写你的拦截器作为一个正常的服务有哪些方法，你需要在此改变（请求，响应，requestError，responseError）

在下面的代码示例中，我只关心请求和respondError属性，所以我只返回一个带有两个属性的服务，还可以使用很多拦截器来处理每种属性。许多拦截器只能应用于一个属性（某种拦截器） tor：认证，处理错误，恢复请求，预处理响应/请求数据...）。

app.factory('AuthenticationInterceptor', function RequestInterceptor($rootScope, CoreConfig) { 
    var service = this; 

    service.request = function (config) { 
     if (angular.isDefined(CoreConfig.TokenKeyString) && angular.isDefined(CoreConfig.SessionKeyString)) { 
      config.headers['Authorization-Token'] = CoreConfig.TokenKeyString; 
      config.headers.SessionKeyString = CoreConfig.SessionKeyString; 
     } 
     return config; 
    }; 

    service.responseError = function (response) { 
     return response; 
    }; 

    return service; 
}); 

然后在配置阶段把你的拦截器：

appp.config(['$httpProvider', function ($httpProvider) { 
    $httpProvider.interceptors.push('AuthenticationInterceptor'); 
}]);