AngularJs HTTP響應攔截器實現登陸、許可權校正

標籤：關閉   返回   完成   例子   default   http   自動跳轉   異常   inject   

$httpAngularJS 的 $http 服務允許我們通過發送 HTTP 要求方式與後台進行通訊。在某些情況下，我們希望可以俘獲所有的請求，並且在將其發送到服務端之前進行操作。還有一些情況是，我們希望俘獲響應，並且在完成完成調用之前處理它。一個很好例子就是處理全域 http 異常。攔截器(Interceptors)應運而生。本文將介紹 AngularJS 的攔截器，並且給幾個有用的例子。

 

 

什麼是攔截器？

$httpProvider 中有一個 interceptors 數組，而所謂攔截器只是一個簡單的註冊到了該數組中的常規服務工廠。下面的例子告訴你怎麼建立一個攔截器:

<!-- lang: js -->module.factory(‘myInterceptor‘, [‘$log‘, function($log) {    $log.debug(‘$log is here to show you that this is a regular factory with injection‘);    var myInterceptor = {        ....        ....        ....    };    return myInterceptor;}]);

然後通過它的名字添加到 $httpProvider.interceptors 數組:

<!-- lang: js -->module.config([‘$httpProvider‘, function($httpProvider) {    $httpProvider.interceptors.push(‘myInterceptor‘);}]);

攔截器允許你:

• 通過實現 request 方法攔截請求: 該方法會在 $http 發送請求道後台之前執行，因此你可以修改配置或做其他的操作。該方法接收請求設定物件(request configuration object)作為參數，然後必須返回設定物件或者 promise 。如果返回無效的設定物件或者 promise 則會被拒絕，導致 $http 調用失敗。

• 通過實現 response 方法攔截響應: 該方法會在 $http 接收到從後台過來的響應之後執行，因此你可以修改響應或做其他動作。該方法接收響應對象(response object)作為參數，然後必須返迴響應對象或者 promise。響應對象包括了請求配置(request configuration)，頭(headers)，狀態(status)和從後台過來的資料(data)。如果返回無效的響應對象或者 promise 會被拒絕，導致 $http 調用失敗。

• 通過實現 requestError 方法攔截請求異常: 有時候一個請求發送失敗或者被攔截器拒絕了。請求異常攔截器會俘獲那些被上一個請求攔截器中斷的請求。它可以用來恢複請求或者有時可以用來撤銷請求之前所做的配置，比如說關閉進度條，啟用按鈕和輸入框什麼之類的。

• 通過實現 responseError 方法攔截響應異常: 有時候我們後台調用失敗了。也有可能它被一個請求攔截器拒絕了，或者被上一個響應攔截器中斷了。在這種情況下，響應異常攔截器可以協助我們恢複後台調用。

 angularjs提供四種攔截器，其中兩種成功攔截器（request、response），兩種失敗攔截器（requestError、responseError）。

 

angular.module("myApp", [])    .factory(‘httpInterceptor‘, [ ‘$q‘, ‘$injector‘,function($q, $injector) {        var httpInterceptor = {            ‘responseError‘ : function(response) {                ......                return $q.reject(response);            },            ‘response‘ : function(response) {                ......                return response;            },            ‘request‘ : function(config) {                ......                return config;            },            ‘requestError‘ : function(config){                ......                return $q.reject(config);            }        }        return httpInterceptor;    }

 

因此，我們可以通過攔截器來判斷用於的登陸與許可權問題。

 

代碼中的 $rootScope.user是登入後把使用者資訊放到了全域rootScope上，方便其他地方使用，$rootScope.defaultPage也是預設首頁面，初始化的時候寫死到rootScope裡的。

$rootScope.$on(‘$stateChangeStart‘,function(event, toState, toParams, fromState, fromParams){if(toState.name==‘login‘)return;// 如果是進入登入介面則允許// 如果使用者不存在if(!$rootScope.user || !$rootScope.user.token){event.preventDefault();// 取消預設跳轉行為$state.go("login",{from:fromState.name,w:‘notLogin‘});//跳轉到登入介面}});

 

另外還有使用者已經登入，但是登入逾時了，還有就是增加後台介面的判斷來增強安全性。不能完全依靠本地邏輯

我們在model裡面增加一個使用者攔截器,在rensponseError中判斷錯誤碼，拋出事件讓Contoller或view來處理

 

app.factory(‘UserInterceptor‘, ["$q","$rootScope",function ($q,$rootScope) {return {        request:function(config){            config.headers["TOKEN"] = $rootScope.user.token;            return config;        },        responseError: function (response) {            var data = response.data;// 判斷錯誤碼，如果是未登入            if(data["errorCode"] == "500999"){// 清空使用者本地token儲存的資訊，如果                $rootScope.user = {token:""};// 全域事件，方便其他view擷取該事件，並給以相應的提示或處理                $rootScope.$emit("userIntercepted","notLogin",response);            }// 如果是登入逾時if(data["errorCode"] == "500998"){                $rootScope.$emit("userIntercepted","sessionOut",response);            }            return $q.reject(response);        }    };}]);

別忘了要註冊攔截器到angularjs的config中哦

app.config(function ($httpProvider) { $httpProvider.interceptors.push(‘UserInterceptor‘);});

 

最後在controller中處理錯誤事件

 

$rootScope.$on(‘userIntercepted‘,function(errorType){    // 跳轉到登入介面，這裡我記錄了一個from，這樣可以在登入後自動跳轉到未登入之前的那個介面    $state.go("login",{from:$state.current.name,w:errorType});});

 

 

最後還可以在loginController中做更多的細節處理

 

// 如果使用者已經登入了，則立即跳轉到一個預設首頁上去，無需再登入if($rootScope.user.token){    $state.go($rootScope.defaultPage);    return;}

另外在登入成功回調後還可以跳轉到上一次介面，也就是上面記錄的from

 

 

var from = $stateParams["from"];$state.go(from && from != "login" ? from : $rootScope.defaultPage);

AngularJs HTTP響應攔截器實現登陸、許可權校正