angularJS中的拦截器
2016-04-10 11:49
281 查看
这里我将的拦截器,是关于前端项目的请求的拦截器,基于angularJS中的httpProvider的。
有没有这样一种场景,在使用ajax请求的时候,服务端需要验证header中的token和cookie,所以每次请求的时候都需要加上这个token,cookie不用加,每次请求的时候浏览器都会帮你带上,所以你就需要在有ajax的地方都添加一段向header中写token的代码,是不是觉得挺闹心的?
别怕,我来帮你解决这个问题。
在angularJS官方api中$http处有这么一段话:
For purposes of global error handling, authentication, or any kind of synchronous or asynchronous pre-processing of request or postprocessing of responses, it is desirable to be able to intercept
requests before they are handed to the server and responses before they are handed over to the application code that initiated these requests. The interceptors leverage the promise
APIs to fulfill this need for both synchronous and asynchronous pre-processing.
The interceptors are service factories that are registered with the
with dependencies (if specified) and returns the interceptor.
这段话的意思就是通过使用promise对象(处理回调的一个非常使用的对象)和$httpProvider.interceoters这个数组,按照该数组的指定格式,就可以对请求的过程进行控制,数据的格式是这样的:
相信一些小伙伴看了这个数据已经有些感觉了,因为angular 的$http是封装了ajax的,所以可以通过$httpProvider控制请求的过程。
附上我在程序中的代码加深理解:
mAlert是我自己封装的一个模态框,可以忽略。
factory返回了一个$httpProvider.interceptors数据规定的格式,用于当request之前为header添加token,reponseError用与服务端返回错误状态时的操作。provider相当于封装了一个类,用于factory中调用。
在config中将拦截器注入数据中,就可以实现在整个引用程序中的ajax请求的header中带上token,效果不错吧~
效果图如下:
有没有这样一种场景,在使用ajax请求的时候,服务端需要验证header中的token和cookie,所以每次请求的时候都需要加上这个token,cookie不用加,每次请求的时候浏览器都会帮你带上,所以你就需要在有ajax的地方都添加一段向header中写token的代码,是不是觉得挺闹心的?
别怕,我来帮你解决这个问题。
在angularJS官方api中$http处有这么一段话:
For purposes of global error handling, authentication, or any kind of synchronous or asynchronous pre-processing of request or postprocessing of responses, it is desirable to be able to intercept
requests before they are handed to the server and responses before they are handed over to the application code that initiated these requests. The interceptors leverage the promise
APIs to fulfill this need for both synchronous and asynchronous pre-processing.
The interceptors are service factories that are registered with the
$httpProviderby adding them to the
$httpProvider.interceptorsarray. The factory is called and injected
with dependencies (if specified) and returns the interceptor.
这段话的意思就是通过使用promise对象(处理回调的一个非常使用的对象)和$httpProvider.interceoters这个数组,按照该数组的指定格式,就可以对请求的过程进行控制,数据的格式是这样的:
{ // optional method 'request': function(config) { // do something on success return config; }, // optional method 'requestError': function(rejection) { // do something on error if (canRecover(rejection)) { return responseOrNewPromise } return $q.reject(rejection); }, // optional method 'response': function(response) { // do something on success return response; }, // optional method 'responseError': function(rejection) { // do something on error if (canRecover(rejection)) { return responseOrNewPromise } return $q.reject(rejection); }
相信一些小伙伴看了这个数据已经有些感觉了,因为angular 的$http是封装了ajax的,所以可以通过$httpProvider控制请求的过程。
附上我在程序中的代码加深理解:
var App = angular.module('app',[]); App.factory('authInterceptor',['$q','authService','mAlert',function($q,authService,mAlert){ return { 'request':function(config){ var token = (authService.getToken()); config.headers['author'] = token; return config ||$q.when(config); }, 'responseError' :function(resError) { if(resError.status == 404){ mAlert.alert({ title:'系统提示', body:'请求资源未找到' }) } return $q.reject(resError); } } }]) .provider('authService',function(){ var token="zhumin", self = this; self.$get = function(){ return { getToken:function(){ return token; } } } }).config(['$httpProvider',function($httpProvider){ $httpProvider.interceptors.push('authInterceptor') }])
mAlert是我自己封装的一个模态框,可以忽略。
factory返回了一个$httpProvider.interceptors数据规定的格式,用于当request之前为header添加token,reponseError用与服务端返回错误状态时的操作。provider相当于封装了一个类,用于factory中调用。
在config中将拦截器注入数据中,就可以实现在整个引用程序中的ajax请求的header中带上token,效果不错吧~
效果图如下:
相关文章推荐
- AngularJS基础教程之简单介绍
- AngularJS中处理多个promise的方式
- angularJS 中$attrs方法使用指南
- 深入浅析AngularJS和DataModel
- 简述AngularJS相关的一些编程思想
- 不能不知道的10个angularjs英文学习网站
- AngularJS中的$watch(),$digest()和$apply()区分
- AngularJS的一些基本样式初窥
- 简单讲解AngularJS的Routing路由的定义与使用
- 创建你的第一个AngularJS应用的方法
- 详解AngularJS中的作用域
- Angular发布1.5正式版,专注于向Angular 2的过渡
- 简介AngularJS的视图功能应用
- AngularJS语法详解
- AngularJS 2.0新特性有哪些
- AngualrJS中的Directive制作一个菜单
- 在AngularJS框架中处理数据建模的方式解析
- angularJS与bootstrap结合实现动态加载弹出提示内容
- AngularJS实现全选反选功能
- angularjs中的e2e测试实例