angular.js - Angular的Interceptor怎麼配置到專案所有的module中？

Question

• 想針對angular的$http請求錯誤碼做統一處理（例如用戶未登入時，跳到登入頁面）

• 而網上的關於$httpProvider interceptor的案例，都是在具體的module.config中進行配置的（如果專案中module多的話，豈不是要一個個去配置？）

• 目前，我的專案程式碼結構是，一個JS檔定義一個module，主模組依賴這些子module。想知道怎麼將$http錯誤碼的攔截處理，配置到所有的module？

//依赖的业务模块
var SERVICE_DEPENDENCIES = ['module1','module2'];
//依赖的公共组件模块
var COMMON_DEPENDENCIES = ['ui.router','ngCookies','ngAnimate','toastr'];
//声明主模块：并合并和引入相关模块
var mainApp = angular.module('mainApp', COMMON_DEPENDENCIES.concat(SERVICE_DEPENDENCIES));

//主模块配置
mainApp.config(['$httpProvider',function($httpProvider){
  //为http添加过滤器
  $httpProvider.interceptors.push('myHttpInterceptor');
}]);

//过滤器定义
mainApp.factory('myHttpInterceptor',function($q){
  return {
    'response' : function(_response){
      if(_response.data.errorCode == 1){
        console.info("myHttpInterceptor response:" + JSON.stringify(_response));    
      }
      return _response;
    }
  }
});

• 在mainApp中定義的過濾器，並不適用於module1、module2子模組。該如何配置到所有的module？

Answer 1

謝邀。

所以可以明確一點，主 mainApp 定义的 $httpProvider 對你所依賴的其他子模組下同樣適用。

你的程式碼看起來沒有什麼問題，但我們專案中的確是不同模組中是相適用主模組的。唯一不同的好像在模組名上面。

像我們模組名稱都是這樣的命名規則：

• 主模組 ent。

• 業務模組 ent.user。

類似這樣，我不確定是不是這個原因！