詳解AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)
更新時(shí)間：2017年04月11日 15:28:11 作者：_靜_水_流_深_
本篇文章主要介紹了AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
$httpAngularJS 的 $http 服務(wù)允許我們通過(guò)發(fā)送 HTTP 請(qǐng)求方式與后臺(tái)進(jìn)行通信。在某些情況下，我們希望可以俘獲所有的請(qǐng)求，并且在將其發(fā)送到服務(wù)端之前進(jìn)行操作。還有一些情況是，我們希望俘獲響應(yīng)，并且在完成完成調(diào)用之前處理它。一個(gè)很好例子就是處理全局 http 異常。攔截器(Interceptors)應(yīng)運(yùn)而生。本文將介紹 AngularJS 的攔截器，并且給幾個(gè)有用的例子。
什么是攔截器？
$httpProvider 中有一個(gè) interceptors 數(shù)組，而所謂攔截器只是一個(gè)簡(jiǎn)單的注冊(cè)到了該數(shù)組中的常規(guī)服務(wù)工廠。下面的例子告訴你怎么創(chuàng)建一個(gè)攔截器:
<!-- 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;
}]);
然后通過(guò)它的名字添加到 $httpProvider.interceptors 數(shù)組:
<!-- lang: js -->
module.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('myInterceptor');
}]);
攔截器允許你:
- 通過(guò)實(shí)現(xiàn) request 方法攔截請(qǐng)求: 該方法會(huì)在 $http 發(fā)送請(qǐng)求道后臺(tái)之前執(zhí)行，因此你可以修改配置或做其他的操作。該方法接收請(qǐng)求配置對(duì)象(request configuration object)作為參數(shù)，然后必須返回配置對(duì)象或者 promise 。如果返回?zé)o效的配置對(duì)象或者 promise 則會(huì)被拒絕，導(dǎo)致 $http 調(diào)用失敗。
- 通過(guò)實(shí)現(xiàn) response 方法攔截響應(yīng): 該方法會(huì)在 $http 接收到從后臺(tái)過(guò)來(lái)的響應(yīng)之后執(zhí)行，因此你可以修改響應(yīng)或做其他操作。該方法接收響應(yīng)對(duì)象(response object)作為參數(shù)，然后必須返回響應(yīng)對(duì)象或者 promise。響應(yīng)對(duì)象包括了請(qǐng)求配置(request configuration)，頭(headers)，狀態(tài)(status)和從后臺(tái)過(guò)來(lái)的數(shù)據(jù)(data)。如果返回?zé)o效的響應(yīng)對(duì)象或者 promise 會(huì)被拒絕，導(dǎo)致 $http 調(diào)用失敗。
- 通過(guò)實(shí)現(xiàn) requestError 方法攔截請(qǐng)求異常: 有時(shí)候一個(gè)請(qǐng)求發(fā)送失敗或者被攔截器拒絕了。請(qǐng)求異常攔截器會(huì)俘獲那些被上一個(gè)請(qǐng)求攔截器中斷的請(qǐng)求。它可以用來(lái)恢復(fù)請(qǐng)求或者有時(shí)可以用來(lái)撤銷請(qǐng)求之前所做的配置，比如說(shuō)關(guān)閉進(jìn)度條，激活按鈕和輸入框什么之類的。
- 通過(guò)實(shí)現(xiàn) responseError 方法攔截響應(yīng)異常: 有時(shí)候我們后臺(tái)調(diào)用失敗了。也有可能它被一個(gè)請(qǐng)求攔截器拒絕了，或者被上一個(gè)響應(yīng)攔截器中斷了。在這種情況下，響應(yīng)異常攔截器可以幫助我們恢復(fù)后臺(tái)調(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;
}
因此，我們可以通過(guò)攔截器來(lái)判斷用于的登陸與權(quán)限問題。
代碼中的 $rootScope.user是登錄后把用戶信息放到了全局rootScope上，方便其他地方使用，$rootScope.defaultPage也是默認(rèn)主頁(yè)面，初始化的時(shí)候?qū)懰赖絩ootScope里的。
$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
if(toState.name=='login')return;// 如果是進(jìn)入登錄界面則允許
// 如果用戶不存在
if(!$rootScope.user || !$rootScope.user.token){
event.preventDefault();// 取消默認(rèn)跳轉(zhuǎn)行為
$state.go("login",{from:fromState.name,w:'notLogin'});//跳轉(zhuǎn)到登錄界面
}
});
另外還有用戶已經(jīng)登錄，但是登錄超時(shí)了，還有就是增加后臺(tái)接口的判斷來(lái)增強(qiáng)安全性。不能完全依靠本地邏輯
我們?cè)趍odel里面增加一個(gè)用戶攔截器,在rensponseError中判斷錯(cuò)誤碼，拋出事件讓Contoller或view來(lái)處理
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;
// 判斷錯(cuò)誤碼，如果是未登錄
if(data["errorCode"] == "500999"){
// 清空用戶本地token存儲(chǔ)的信息，如果
$rootScope.user = {token:""};
// 全局事件，方便其他view獲取該事件，并給以相應(yīng)的提示或處理
$rootScope.$emit("userIntercepted","notLogin",response);
}
// 如果是登錄超時(shí)
if(data["errorCode"] == "500998"){
$rootScope.$emit("userIntercepted","sessionOut",response);
}
return $q.reject(response);
}
};
}]);
別忘了要注冊(cè)攔截器到angularjs的config中哦
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('UserInterceptor');
});
最后在controller中處理錯(cuò)誤事件
$rootScope.$on('userIntercepted',function(errorType){
// 跳轉(zhuǎn)到登錄界面，這里我記錄了一個(gè)from，這樣可以在登錄后自動(dòng)跳轉(zhuǎn)到未登錄之前的那個(gè)界面
$state.go("login",{from:$state.current.name,w:errorType});
});
最后還可以在loginController中做更多的細(xì)節(jié)處理
// 如果用戶已經(jīng)登錄了，則立即跳轉(zhuǎn)到一個(gè)默認(rèn)主頁(yè)上去，無(wú)需再登錄
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);
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)登錄注冊(cè)框手機(jī)號(hào)和驗(yàn)證碼校驗(yàn)（前端部分）
- JavaScript 完成注冊(cè)頁(yè)面表單校驗(yàn)的實(shí)例
- JavaScript注冊(cè)時(shí)密碼強(qiáng)度校驗(yàn)代碼
- js簡(jiǎn)單實(shí)現(xiàn)用戶注冊(cè)信息的校驗(yàn)代碼
- JS校驗(yàn)與最終登陸界面功能完整示例
- Angular.js與node.js項(xiàng)目里用cookie校驗(yàn)賬戶登錄詳解
- jsp登陸校驗(yàn)演示 servlet、login、success
- 攔截JSP頁(yè)面，校驗(yàn)是否已登錄詳解及實(shí)現(xiàn)代碼
- ASP.NET MVC結(jié)合JavaScript登錄、校驗(yàn)和加密
- javascript使用正則表達(dá)式實(shí)現(xiàn)注冊(cè)登入校驗(yàn)
相關(guān)文章
這篇文章主要介紹了AngularJS中的DOM操作,較為詳細(xì)的分析了AngularJS針對(duì)DOM操作的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
AngualrJS中每次$http請(qǐng)求時(shí)的一個(gè)遮罩層Directive
AngularJS是一款非常強(qiáng)大的前端MVC框架。接下來(lái)通過(guò)本文給大家介紹AngualrJS中每次$http請(qǐng)求時(shí)的一個(gè)遮罩層Directive，本文非常具有參考借鑒價(jià)值，特此分享供大家學(xué)習(xí)2016-01-01
本文主要介紹AngularJS的面試題資料整理，這里整理了相關(guān)面試題的資料，幫助大家學(xué)習(xí)理解AngularJS的知識(shí)，有興趣的小伙伴可以參考下2016-09-09
本篇文章主要介紹了Angular CLI 安裝和使用教程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
總結(jié)十個(gè)Angular.js由淺入深的面試問題
這篇文章雖然只有10個(gè)問題，但是覆蓋了angular開發(fā)中的各個(gè)方面，有基本的知識(shí)點(diǎn)，也有在開發(fā)過(guò)程中遇見的問題，同時(shí)也有較為開放性的問題去辨別面試者的基礎(chǔ)水準(zhǔn)和項(xiàng)目經(jīng)驗(yàn)，注意答案僅供參考哦～2016-08-08
本篇文章主要介紹了淺談Angular 中何時(shí)取消訂閱，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
本文主要介紹AngularJS ng-mousedown 指令,這里幫大家整理了ng-mousedown 指令的基本資料,并附代碼示例,有需要的朋友可以參考下2016-08-08
利用Angular2 + Ionic3開發(fā)IOS應(yīng)用實(shí)例教程
這篇文章主要給大家介紹了關(guān)于利用Angular2 + Ionic3開發(fā)IOS應(yīng)用的相關(guān)資料，文中通過(guò)示例代碼和圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
Angular Excel 導(dǎo)入與導(dǎo)出的實(shí)現(xiàn)代碼
這篇文章主要介紹了Angular Excel 導(dǎo)入與導(dǎo)出的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
angularjs項(xiàng)目的頁(yè)面跳轉(zhuǎn)如何實(shí)現(xiàn)（5種方法）
本篇文章主要介紹了詳解angularjs項(xiàng)目的頁(yè)面跳轉(zhuǎn)如何實(shí)現(xiàn) ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05