Angularjs的前端拦截器

最近项目中，要使用过滤器去做登陆拦截，接到要求的第一反应肯定是java的filter。简单方便，后来发现项目中很多请求用到的是ajax异步请求，在使用sendRedirect跳转的时候，根本跳出过去。因为服务器要控制页面跳转必须客户端提交请求，服务器接到请求后，将处理后的html返回至页面展示

 AJAX是从服务端获取到内容后利用客户端脚本替换InnerHtml，这本质上是客户端的行为，所以Ajax只是利用脚本访问对应地址获取数据而已，不能做除了获取返回数据以外的其它动作了。后来网上找到了Angularjs的拦截器来实现我们的请求。

$httpAngularJS 的服务允许我们通过发送 HTTP 请求方式与后台进行通信。在某些情况下，我们希望可以俘获所有的请求，并且在将其发送到服务端之前进行操作。还有一些情况是，我们希望俘获响应，并且在完成完成调用之前处理它。一个很好例子就是处理全局 http 异常。拦截器(Interceptors)应运而生。本文将介绍 AngularJS 的拦截器，并且给几个有用的例子。
什么是拦截器？
中有一个数组，而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂。下面的例子告诉你怎么创建一个拦截器:
然后通过它的名字添加到数组:
拦截器允许你:

 
 

  
  
通过实现方法拦截请求:该方法会在发送请求道后台之前执行，因此你可以修改配置或做其他的操作。该方法接收请求配置对象(request configuration object)作为参数，然后必须返回配置对象或者。如果返回无效的配置对象或者 promise 则会被拒绝，导致调用失败。
  
  
通过实现方法拦截响应:该方法会在接收到从后台过来的响应之后执行，因此你可以修改响应或做其他操作。该方法接收响应对象(response object)作为参数，然后必须返回响应对象或者。响应对象包括了请求配置(request configuration)，头(headers)，状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者 promise 会被拒绝，导致调用失败。
  
  
通过实现方法拦截请求异常:有时候一个请求发送失败或者被拦截器拒绝了。请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置，比如说关闭进度条，激活按钮和输入框什么之类的。
  
  
通过实现方法拦截响应异常:有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了，或者被上一个响应拦截器中断了。在这种情况下，响应异常拦截器可以帮助我们恢复后台调用。
异步操作
 
 
有时候需要在拦截器中做一些异步操作。幸运的是， AngularJS 允许我们返回一个延后处理。它将会在请求拦截器中延迟发送请求或者在响应拦截器中推迟响应。
这个例子中，请求拦截器使用了一个异步操作，根据结果来更新配置。然后它用更新后的配置继续执行操作。如果被拒绝，http 请求则会失败。
响应拦截器的例子一样:
只有当被解析，请求才算成功，如果被拒绝，请求将会失败。
例子
本节中我将提供一些 AngularJS 拦截器的例子，以便让你更好的理解它们是如何使用的，并且可以展示一下它们能怎样帮助你。不过请记住，我这里提供的解决案不一定是最好或者最准确的解决案。
Session 注入(请求拦截器)
这里有两种方式来实现服务端的认证。第一种是传统的验证。通过服务端的 cookies 来对每个请求的用户进行认证。另一种方式是验证。当用户登录时，他会从后台拿到一个。在服务端标识了每个用户，并且会包含在发送到服务端的每个请求中。
下面的为每个被俘获的请求添加了头 (如果当前用户已登录):
然后创建一个请求:
被拦截之前的配置对象是这样的:
被拦截之后的配置对象是这样的:
时间戳(请求和响应拦截器)
让我们用拦截器来测一下从后台返回响应需要多少时间。可以通过给每个请求和响应加上时间戳。
然后我们可以这样:
完整代码:example for the Timestamp Marker
请求恢复 (请求异常拦截)
为了演示请求异常拦截，我们需要模拟前一个拦截器拒绝了请求这种情况。我们的请求异常拦截器会拿到被拒绝的原因以及恢复请求。
让我们来创建两个拦截器:和。
然后，如果你像下面这样请求，我们会在 log 中看到，虽然拒绝了请求。
完整代码:example for the Request Recover
Session 恢复 (响应异常拦截器)
有时候，我们的单页面应用中，会发生丢失 session 情况。这种情况可能由于 session 过期了或者服务器异常。我们来创建一个拦截器，用于恢复 session 然后自动重新发送原始请求(假设 session 过期的情况)。
为了演示目的，我们来假设发生了 session 过期返回 http 状态码 419。
以这种方式，如果后台调用失败引起 session 过期，会创建一个新的 session 然后重新调用后台。

 
 

  
  

 
 
登陆拦截器：$http$httpProviderinterceptors<!-- 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$httppromise$httpresponse$httppromise$httprequestErrorresponseErrorpromise<!-- lang: js -->
module.factory('$q','someAsyncService',171);">function($q,someAsyncService) {
    var requestInterceptor = {
        request: function(config) {
            var deferred = $q.defer();
            someAsyncService.doAsyncOperation().then(function() {
                // Asynchronous operation succeeded,modify config accordingly
                ...
                deferred.resolve(config);
            },127);">// Asynchronous operation failed,modify config accordingly
                ...
                deferred.resolve(config);
            });
            return deferred.promise;
        }
    };

    return requestInterceptor;
}]);deferred<!-- lang: js -->
module.factory(var responseInterceptor = {
        response: function(response) {
            return responseInterceptor;
}]);deferreddeferredCookie-BasedToken-BasedsessionTokensessionTokensessionInjectorx-session-token<!'sessionInjector',147);">'SessionService',171);">function(SessionService) {
    var sessionInjector = {
        request: function(config) {
            if (!SessionService.isAnonymus) {
                config.headers['x-session-token'] = SessionService.token;
            }
            return config;
        }
    };
    return sessionInjector;
}]);
module.config(['$httpProvider',171);">function($httpProvider) {
    $httpProvider.interceptors.push('sessionInjector');
}]);<!-- lang: js -->
$http.get('https://api.github.com/users/naorye/repos');sessionInjector<!-- lang: js -->
{
    "transformRequest": [
        null
    ],147);">"transformResponse": [
        "method": "GET",147);">"url": "https://api.github.com/users/naorye/repos",147);">"headers": {
        "Accept": "application/json,text/plain,*/*"
    }
}sessionInjector<!-- ,147);">"x-session-token": 415954427904
    }
}<!-- lang: js -->
'timestampMarker',[function() {
    var timestampMarker = {
        request: function(config) {
            config.requestTimestamp = new Date().getTime();
            return config;
        },response: function(response) {
            response.config.responseTimestamp = return response;
        }
    };
    return timestampMarker;
}]);
function($httpProvider) {
    $httpProvider.interceptors.push('timestampMarker');
}]);<!-- lang: js -->
$http.get('https://api.github.com/users/naorye/repos').then(function(response) {
    var time = response.config.responseTimestamp - response.config.requestTimestamp;
    console.log('The request took ' + (time / 1000) + ' seconds.');
});requestRejectorrequestRecoverer<!-- lang: js -->
module.factory('requestRejector',171);">function($q) {
    var requestRejector = {
        request: return $q.reject('requestRejector');
        }
    };
    return requestRejector;
}]);
module.factory('requestRecoverer',171);">var requestRecoverer = {
        requestError: function(rejectReason) {
            if (rejectReason === 'requestRejector') {
                // Recover the request
                return {
                    transformRequest: [],transformResponse: [],method: 'GET',url: 'https://api.github.com/users/naorye/repos',headers: {
                        Accept: 'application/json,*/*'
                    }
                };
            } else {
                return $q.reject(rejectReason);
            }
        }
    };
    return requestRecoverer;
}]);
module.config([function($httpProvider) {
    $httpProvider.interceptors.push('requestRejector');
    // Removing 'requestRecoverer' will result to failed request
    $httpProvider.interceptors.push('requestRecoverer');
}]);successrequestRejector<!-- lang: js -->
$http.get('https://api.github.com/users/naorye/repos').then(function() {
    console.log('success');
},171);">function(rejectReason) {
    console.log('failure');
});<!-- lang: js -->
module.factory('sessionRecoverer',147);">'$injector',$injector) {
    var sessionRecoverer = {
        responseError: function(response) {
            // Session has expired
            if (response.status == 419){
                var SessionService = $injector.get('SessionService');
                var $http = $injector.get('$http');
                var deferred = $q.defer();

                // Create a new session (recover the session)
                // We use login method that logs the user in using the current credentials and
                // returns a promise
                SessionService.login().then(deferred.resolve,deferred.reject);

                // When the session recovered,make the same backend call again and chain the request
                return deferred.promise.then(function() {
                    return $http(response.config);
                });
            }
            return $q.reject(response);
        }
    };
    return sessionRecoverer;
}]);
module.config(['sessionRecoverer');
}]);sessionRecoverer
 
owmsApp.factory('authHttpResponseInterceptor',["$rootScope",'$q','$location',"$routeParams","owmsConstant",function ($rootScope,$q,$location,$routeParams,owmsConstant) {
    //拦截器配置
    return {
        request: function (config) {
            var url = config.url;
            if(url.indexOf("/tms-web/login/getKeyPair.do")> -1||url.indexOf("/tms-web/login/getUserCookie.do")
            		> -1||url.indexOf("/tms-web/login/getPropertiesValues.do")> -1||url.indexOf("/tms-web/login/kaptcha.do")> -1
            		||url.indexOf("/tms-web/login.do")> -1||url.indexOf("/admin/login.html")> -1){
            	
            }else if(url.indexOf(".do")>0){
        	$.ajax({
    	        url : $rootScope.$host + 'check-session.do',async : false,// 注意此处需要同步
    	        type : "POST",success : function(data) {
    	        	if (data.code == owmsConstant.getSuccess()) {
    	        	}else{
    			window.location.href = bootPATH + "/admin/login.html";
    	        	}
    	        }  
    	    });  
        }
            return config || $q.when(config);
        }
    };
}])
owmsApp.config(['$httpProvider',function ($httpProvider) {
    //Http Intercpetor to check auth failures for xhr requests
    $httpProvider.interceptors.push('authHttpResponseInterceptor');
}])
这个跟后台拦截器实现思路基本一样。发送一个请求判断用户是否登陆，如果没有登陆就跳转到登陆页面，登陆的话，就返回confi继续往下走。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。