AngularJS 拦截器
在需要进行身份验证时,在请求发送给服务器之前或者从服务器返回时对其进行拦截,是比较好的实现手段。
例如,对于身份验证,如果服务器返回401状态码,将用户重定向到登录页面。
AngularJS通过拦截器提供了一个从全局层面对响应进行处理的途径。
拦截器是$http服务的基础中间件,用来向应用的业务流程中注入新的逻辑。
一共有四种拦截器,两种成功,两种失败。
request AngularJS通过$http设置对象来对请求拦截器进行调用。
response
requestError
responseError
通过两个步骤来使用拦截器:
在.factory()方法中创建拦截器,然后使用$httpProvider在.config()中注册拦截器:
angular.module("myApp", [])
.factory("myInterceptor", function($q) {
var interceptor = {}; return interceptor; }); //第一步
angular.module("myApp", [])
.config( function($httpProvider) {
$httpProvider.interceptors.push("myInterceptor"); }); //第二步
设置$httpProvider
使用.config()可以向所有请求中添加特定的HTTP头,这对于我们身份验证的时候非常有用。默认的请求头保存在$httpProvider.defaults.headers.common对象中,默认形式如下
Accept: application/json, text/plain, */*
通过.config()函数可以对这些头进行修改或扩充
angular.module("myApp", [])
.config(function($httpProvider) {
$httpProvider.defaults.headers.common['X-Requested-By'] = "MyAngularApp"; });
也可以在运行时通过$http对象的defaults属性对这些默认值进行修改,例如
$http.defaults.common['X-Auth'] = "RandomString";
有时候只需要对post类型请求进行设置,默认的post请求头是
Content-Type: application/json
可以在.config()函数中对post请求的头进行修改或扩充
angular.module("myApp", [])
.config(function($httpProvider) { $httpProvider.defaults.headers.post['X-Posted-By'] = "MyAngularApp"; });
在一篇叫做《Interceptors in AngularJS and Useful Examples By Naor Yehudaey》的文章中有一个例子用以实现服务端的认证,这种方式叫做Token-Based验证,当用户登录的时候,会从后台拿到一个sessionToken,sessionToken在服务端标识了每个用户,并且会包含在发送服务端的每个请求中。
下面sessionInjector为每个被捕获的请求添加了x-session-token头(如果用户已经登录)
module.factory("sessionInjector", ["SessionService", function(SessionService) {
var sessionInjector = {request: function(config) {if( !SessionService.isAnonymus) { config.headers["x-session-token"] = SessionService.token; } return config; } }; return sessionInjector; }]);
module.config(["$httpProvider", function($httpProvider) { $httpProvider.interceptors.push("sessionInjector"); }]);
然后创建一个请求:
$http.get("url");
被sessionInjector拦截之前的配置对象是这样:
{ "transformRequest": [null],"transformResponse": [null], "method": "GET", "url": url, "headers": {"Accept": "application/json, text/plain, */*" } }
被sessionInjector拦截之后的配置对象是:
{"transformRequest": [null], "transformResponse": [null], "method": "GET", "url": url, "headers": {"Accept": "application/json, text/plain, */*", "x-session-token": 415954427904 } }
AngularJS 拦截器的更多相关文章
- AngularJS 拦截器和应用例子(转)
$httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们 ...
- AngularJS 拦截器和好棒例子
目录[-] 什么是拦截器? 异步操作 例子 Session 注入(请求拦截器) 时间戳(请求和响应拦截器) 请求恢复 (请求异常拦截) Session 恢复 (响应异常拦截器) 总结 Intercep ...
- AngularJS 拦截器实现全局$http请求loading效果
日常项目开发中,当前端需要和后端进行数据交互时,为了友好的UI效果,一般都会在前端加个loading的状态提示(包括进度条或者icon显示),数据传输或交互完成之后,再隐藏/删除loading提示. ...
- AngularJS拦截器
AngularJS是通过拦截器提供了一个全局层面对响应进行处理的途径.拦截器实际是$http服务的基础中间件,用来向应用的业务流程中注入新的逻辑,其核心是服务工厂,通过向 $httpProvider. ...
- AngularJs 拦截器,拦截请求
问题前述 我在项目中遇到这样一个问题: 在Angular项目中,会有很多需要用户点击操作的地方,如果用户点击过快会产生多次相同请求,会吃服务器带宽,如果这是其他涉及钱有关的操作,这会产生一个致命的问题 ...
- Angularjs中的拦截器 (卧槽,好牛逼)
$httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们 ...
- (转)Angular中的拦截器Interceptor
什么是拦截器? 异步操作 例子 Session 注入(请求拦截器) 时间戳(请求和响应拦截器) 请求恢复 (请求异常拦截) Session 恢复 (响应异常拦截器) 转之:http://my.osch ...
- 快速了解AngularJs HTTP响应拦截器
任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途 ...
- 【转】AngularJs HTTP请求响应拦截器
任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途 ...
随机推荐
- 命令行工具解析Crash文件,dSYM文件进行符号化
备份 文/爱掏蜂窝的熊(简书作者)原文链接:http://www.jianshu.com/p/0b6f5148dab8著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 序 在日常开发 ...
- CSS3颜色特征温故
网页是色彩的表现原理:显示器是由一个个像素构成,利用电子束来表现色彩.像素把光的三原色:红色(R).绿色(G).蓝色(B)组合成的色彩按照科学原理表现出来.一个像素包含8位元色彩的信息量,又从0 ~ ...
- BASIS--笨办法解决ALV_GRID的列剪切丢失纪录的错误
最近经常有业务人员问及在ALV_grid输出报表中,选择某一列,点击左键,并点击弹出菜单的复制文本,复制出的文本存在丢失 (纪录不少,但部分纪录的文本丢失).该如何解决呢? 后来跟踪代码发现这个命令没 ...
- sharepoint 开发相关工具总结
1.CAML Designer 2013 开发caml用 http://biwug-web.sharepoint.com/SitePages/Caml_designer.aspx 2.SharePoi ...
- 关于Android Force Close 出现的原因 以及解决方法
一.原因: forceclose,意为强行关闭,当前应用程序发生了冲突. NullPointExection(空指针),IndexOutOfBoundsException(下标越界),就连Androi ...
- Phonegap 之 iOS银联在线支付(js调用ios端银联支付控件)
Phonegap项目,做支付的时候,当把网站打包到ios或android端成app后,在app上通过wap调用银联在线存在一个问题: 就是当从银联支付成功后,再从服务器返回到app客户端就很难实现. ...
- Mac wifi已打开但尚未连接到网络
把网络偏好设置 里面的询问新网络 关闭了 然后 重启电脑 试一下 应该就可以了
- 按钮在cell上的高亮状态出现的慢
在单元格上放一个全屏长的按钮 高度不是cell的高度 当点击cell上的按钮的时候 按钮的高亮状态会出现的比较慢 因为按钮设置的就是touchUpInside 所以当你向下按的时候 ...
- UEditor无法复制的解决方法
今天终于知道UEditor不能复制的真正原因啦,还是自己一直没有仔细研究. UEditor 粘贴 Excell 中的表格时报错导致无法粘贴的解决办法 在UEditor一些版本中,如果粘贴Excell中 ...
- MyEclipse Servers视窗出现“Could not create the view: An unexpected exception was thrown”错误的解决办法
打开myeclipse所在的wordspace文件夹,在下面子文件夹 .metadata\.plugins\org.eclipse.core.runtime\.settings删除 com.genui ...