發送在角

Question

嵌套$ HTTP請求在我AngularJS需要1.6.4應用到一些檢查之前發送任何$ HTTP請求，所以我創建一個服務來處理，並用它來發送的任何請求。該服務只包含一個公共功能「發送」取出請求的數據並進行一些檢查： 1-檢查是否有令牌：如果沒有發送請求獲取來賓令牌，則發送所需的請求。 2-如果有令牌：檢查它是否過期：是否不發送所需的請求。 3-如果過期：發送刷新令牌請求，然後發送所需的請求。

我的服務代碼：

(function() { 
    function service($http, tokenManager, apiService, API_URL, REFRESH_TOKEN_URL, appToken) { 
    var s = {}; 
    var defaultToken = appToken; 


    s.send = function(data) { 
     var token = tokenManager.getToken(); 
     if (token && token.length > 0) { 
     // check if expired 
     var isTokenExpired = tokenManager.isTokenExpired(); 
     if (isTokenExpired) { 
      sendRefreshTokenRequest(token).then(function(response) { 
      // update the exist token and send with the new one 
      return sendTheRequiredRequest(data, token); 
      }, function(errors) { 

      }); 
      // token is expired so we need to send refresh token then send our request 
     } else { 
      // send our request 
      return sendTheRequiredRequest(data, token); 
     } 
     } else { 
     token = defaultToken; 
     // if the request not login or count send getToken for guest first 
     if (data.loginAuthentication || data.countryCitiesAreasList) { 
      //send the request with the defaultToken 
      return sendTheRequiredRequest(data, defaultToken); 
     } else { 
      // send guest token first then the request 
      sendRequestGetTokenForGuest(defaultToken).then(function(response) { 
      var newToken = response.data.token; 
      var isSetted = tokenManager.setToken(newToken); 
      return sendTheRequiredRequest(data, newToken); 
      }, function(errors) { 

      }); 
     } 
     } 
    }; 


    function sendRequestGetTokenForGuest(token) { 
     var data = apiService.getApiObj("gtoken", "11651"); 
     var headerParams = createHeaderParams(token); 
     return $http({ 
     method: "POST", 
     url: API_URL, 
     headers: headerParams, 
     data: data 
     }); 
    } 

    function sendRefreshTokenRequest(token) { 
     var headerParams = createHeaderParams(token); 
     return $http({ 
     method: "POST", 
     url: REFRESH_TOKEN_URL, 
     headers: headerParams 
     }); 
    } 

    function sendTheRequiredRequest(data, token) { 
     var headerParams = createHeaderParams(token); 
     return $http({ 
     method: "POST", 
     url: API_URL, 
     headers: headerParams, 
     data: data 
     }); 
    } 

    function createCurrentTimeStamp() { 
     return Math.floor(Date.now()).toString(); 
    } 

    function createHeaderParams(token) { 
     var headerParams = { 
     token: token, 
     clientTimeStamp: createCurrentTimeStamp() 
     }; 
     return headerParams; 
    } 

    return s; 
    } 
    angular.module('app').factory('apiRequestSender', service); 
})(); 

我用在每個控制器的服務該服務通過調用函數「發送」，數據傳遞給它，並返回此：

return apiRequestSender.send(data); 

然後使用這種服務在路由中是這樣的：

{ 
     name: 'home', 
     url: '/index', 
     templateUrl: 'home/views/index.html', 
     controller: 'homeController', 
     controllerAs: 'vm', 
     resolve: { 
     apiResponse: function(homeApiService) { 
      return homeApiService.getCitiesAreas(); 
     } 
     } 
    } 

現在國家母鹿不能渲染那麼我的錯誤是什麼，或者我在每次請求之前如何執行這些檢查？

Answer 1

我認爲在這裏使用$http攔截器會很有用。 See Docs

基本上，這將確保您的功能檢查在每個 請求之前執行。這裏的要點是，request函數收到一個配置對象，然後你可以 修改&檢查這個config對象，所有你需要做的就是確保你返回這個（或一個新的）config對象。 （返回一個承諾內直接或）

既然你需要做的攔截器內的一些$http請求，你需要確保 它不會在一個無限循環結束了。因此，這裏的要點是檢查URL是否可以在攔截器本身中執行，並且當請求帶有這樣的URL時，您只需 就會返回Config對象。

我做了一個樣板工廠爲你和你的代碼

請注意，這不是測試，應該只給你怎樣做一個知道它

myInterceptor.js

angular 
    .module('app') 
    .factory('myInterceptor', myInterceptor); 


myInterceptor.$inject = [ 
    '$http', 
    'tokenManager', 
    'apiService', 
    'REFRESH_TOKEN_URL', 
    'GUEST_TOKEN_URL' 
]; 

function myInterceptor($http, tokenManager, apiService, REFRESH_TOKEN_URL, GUEST_TOKEN_URL) { 
    return { 
    request: request 
    }; 

    function request(config) { 
    if (config.url === REFRESH_TOKEN_URL || config.url === GUEST_TOKEN_URL) { 
     // Make sure to avoid an Infinite Loop (http calls within the Interceptor) 
     return config; 
    } 

    var defaultToken = appToken; 
    var token = tokenManager.getToken(); 
    if (token && token.length > 0) { 

     var isTokenExpired = tokenManager.isTokenExpired(); 
     if (isTokenExpired) { 

     // Set the Header Params and return the Config object. 
     return sendRefreshTokenRequest(token).then(function(response) { 
      config.headers = createHeaderParams(token); 
      return config; 
     }); 

     } else { 

     config.headers = createHeaderParams(token); 
     return config; 
     } 
    } else { 
     token = defaultToken; 

     if (data.loginAuthentication || data.countryCitiesAreasList) { 
     config.headers = createHeaderParams(defaultToken); 
     return config; 
     } else { 
     // Set the Header Params and return the Config object. 
     return sendRequestGetTokenForGuest(defaultToken).then(function(response) { 
      var newToken = response.data.token; 
      var isSetted = tokenManager.setToken(newToken); 
      config.headers = createHeaderParams(newToken); 
      return config; 
     }); 
     } 
    } 
    } 

    function createCurrentTimeStamp() { 
    return Math.floor(Date.now()).toString(); 
    } 

    function createHeaderParams(token) { 
    var headerParams = { 
     token: token, 
     clientTimeStamp: createCurrentTimeStamp() 
    }; 
    return headerParams; 
    } 

    function sendRequestGetTokenForGuest(token) { 
    var data = apiService.getApiObj("gtoken", "11651"); 
    var headerParams = createHeaderParams(token); 
    return $http({ 
     method: "POST", 
     // url: API_URL, 
     // Changed because you want to capture this URL in the Interceptor, 
     // so it wont do its checks when the url is like this. (avoid Infinite loop) 
     url: GUEST_TOKEN_URL, 
     headers: headerParams, 
     data: data 
    }); 
    } 

    function sendRefreshTokenRequest(token) { 
    var headerParams = createHeaderParams(token); 
    return $http({ 
     method: "POST", 
     url: REFRESH_TOKEN_URL, 
     headers: headerParams 
    }); 
    } 
} 

註冊攔截器：

angular 
    .module('app') 
    .config(['$httpProvider', function($httpProvider) { 
    $httpProvider.interceptors.push('myInterceptor'); 
}]); 

希望這會有幫助:)