這篇文章主要介紹了AngularJs中HTTP響應(yīng)攔截器實現(xiàn)登陸、權(quán)限校驗的示例分析,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)公司是少有的成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、營銷型企業(yè)網(wǎng)站、微信平臺小程序開發(fā)、手機APP,開發(fā)、制作、設(shè)計、買鏈接、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,公司2013年成立,堅持透明化,價格低,無套路經(jīng)營理念。讓網(wǎng)頁驚喜每一位訪客多年來深受用戶好評$httpAngularJS 的 $http 服務(wù)允許我們通過發(fā)送 HTTP 請求方式與后臺進行通信。在某些情況下,我們希望可以俘獲所有的請求,并且在將其發(fā)送到服務(wù)端之前進行操作。還有一些情況是,我們希望俘獲響應(yīng),并且在完成完成調(diào)用之前處理它。一個很好例子就是處理全局 http 異常。攔截器(Interceptors)應(yīng)運而生。本文將介紹 AngularJS 的攔截器,并且給幾個有用的例子。
什么是攔截器?
$httpProvider 中有一個 interceptors 數(shù)組,而所謂攔截器只是一個簡單的注冊到了該數(shù)組中的常規(guī)服務(wù)工廠。下面的例子告訴你怎么創(chuàng)建一個攔截器:
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 數(shù)組:
module.config(['$httpProvider', function($httpProvider) { $httpProvider.interceptors.push('myInterceptor'); }]);
攔截器允許你:
通過實現(xiàn) request 方法攔截請求:該方法會在 $http 發(fā)送請求道后臺之前執(zhí)行,因此你可以修改配置或做其他的操作。該方法接收請求配置對象(request configuration object)作為參數(shù),然后必須返回配置對象或者 promise 。如果返回?zé)o效的配置對象或者 promise 則會被拒絕,導(dǎo)致 $http 調(diào)用失敗。
通過實現(xiàn) response 方法攔截響應(yīng):該方法會在 $http 接收到從后臺過來的響應(yīng)之后執(zhí)行,因此你可以修改響應(yīng)或做其他操作。該方法接收響應(yīng)對象(response object)作為參數(shù),然后必須返回響應(yīng)對象或者 promise。響應(yīng)對象包括了請求配置(request configuration),頭(headers),狀態(tài)(status)和從后臺過來的數(shù)據(jù)(data)。如果返回?zé)o效的響應(yīng)對象或者 promise 會被拒絕,導(dǎo)致 $http 調(diào)用失敗。
通過實現(xiàn) requestError 方法攔截請求異常:有時候一個請求發(fā)送失敗或者被攔截器拒絕了。請求異常攔截器會俘獲那些被上一個請求攔截器中斷的請求。它可以用來恢復(fù)請求或者有時可以用來撤銷請求之前所做的配置,比如說關(guān)閉進度條,激活按鈕和輸入框什么之類的。
通過實現(xiàn) responseError 方法攔截響應(yīng)異常:有時候我們后臺調(diào)用失敗了。也有可能它被一個請求攔截器拒絕了,或者被上一個響應(yīng)攔截器中斷了。在這種情況下,響應(yīng)異常攔截器可以幫助我們恢復(fù)后臺調(diào)用。
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; }
因此,我們可以通過攔截器來判斷用于的登陸與權(quán)限問題。
代碼中的 $rootScope.user是登錄后把用戶信息放到了全局rootScope上,方便其他地方使用,$rootScope.defaultPage也是默認主頁面,初始化的時候?qū)懰赖絩ootScope里的。
$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){ if(toState.name=='login')return;// 如果是進入登錄界面則允許 // 如果用戶不存在 if(!$rootScope.user || !$rootScope.user.token){ event.preventDefault();// 取消默認跳轉(zhuǎn)行為 $state.go("login",{from:fromState.name,w:'notLogin'});//跳轉(zhuǎn)到登錄界面 } });
另外還有用戶已經(jīng)登錄,但是登錄超時了,還有就是增加后臺接口的判斷來增強安全性。不能完全依靠本地邏輯
我們在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獲取該事件,并給以相應(yīng)的提示或處理 $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){ // 跳轉(zhuǎn)到登錄界面,這里我記錄了一個from,這樣可以在登錄后自動跳轉(zhuǎn)到未登錄之前的那個界面 $state.go("login",{from:$state.current.name,w:errorType}); });
最后還可以在loginController中做更多的細節(jié)處理
// 如果用戶已經(jīng)登錄了,則立即跳轉(zhuǎn)到一個默認主頁上去,無需再登錄 if($rootScope.user.token){ $state.go($rootScope.defaultPage); return; }
另外在登錄成功回調(diào)后還可以跳轉(zhuǎn)到上一次界面,也就是上面記錄的from
var from = $stateParams["from"]; $state.go(from && from != "login" ? from : $rootScope.defaultPage);
感謝你能夠認真閱讀完這篇文章,希望小編分享的“AngularJs中HTTP響應(yīng)攔截器實現(xiàn)登陸、權(quán)限校驗的示例分析”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián)建站,關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。