在需要进行身份验证时,在请求发送给服务器之前或者从服务器返回时对其进行拦截,是比较好的实现手段。

例如,对于身份验证,如果服务器返回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 拦截器的更多相关文章

  1. AngularJS 拦截器和应用例子(转)

    $httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们 ...

  2. AngularJS 拦截器和好棒例子

    目录[-] 什么是拦截器? 异步操作 例子 Session 注入(请求拦截器) 时间戳(请求和响应拦截器) 请求恢复 (请求异常拦截) Session 恢复 (响应异常拦截器) 总结 Intercep ...

  3. AngularJS 拦截器实现全局$http请求loading效果

    日常项目开发中,当前端需要和后端进行数据交互时,为了友好的UI效果,一般都会在前端加个loading的状态提示(包括进度条或者icon显示),数据传输或交互完成之后,再隐藏/删除loading提示. ...

  4. AngularJS拦截器

    AngularJS是通过拦截器提供了一个全局层面对响应进行处理的途径.拦截器实际是$http服务的基础中间件,用来向应用的业务流程中注入新的逻辑,其核心是服务工厂,通过向 $httpProvider. ...

  5. AngularJs 拦截器,拦截请求

    问题前述 我在项目中遇到这样一个问题: 在Angular项目中,会有很多需要用户点击操作的地方,如果用户点击过快会产生多次相同请求,会吃服务器带宽,如果这是其他涉及钱有关的操作,这会产生一个致命的问题 ...

  6. Angularjs中的拦截器 (卧槽,好牛逼)

    $httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们 ...

  7. (转)Angular中的拦截器Interceptor

    什么是拦截器? 异步操作 例子 Session 注入(请求拦截器) 时间戳(请求和响应拦截器) 请求恢复 (请求异常拦截) Session 恢复 (响应异常拦截器) 转之:http://my.osch ...

  8. 快速了解AngularJs HTTP响应拦截器

    任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途 ...

  9. 【转】AngularJs HTTP请求响应拦截器

    任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途 ...

随机推荐

  1. 命令行工具解析Crash文件,dSYM文件进行符号化

    备份   文/爱掏蜂窝的熊(简书作者)原文链接:http://www.jianshu.com/p/0b6f5148dab8著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 序 在日常开发 ...

  2. CSS3颜色特征温故

    网页是色彩的表现原理:显示器是由一个个像素构成,利用电子束来表现色彩.像素把光的三原色:红色(R).绿色(G).蓝色(B)组合成的色彩按照科学原理表现出来.一个像素包含8位元色彩的信息量,又从0 ~ ...

  3. BASIS--笨办法解决ALV_GRID的列剪切丢失纪录的错误

    最近经常有业务人员问及在ALV_grid输出报表中,选择某一列,点击左键,并点击弹出菜单的复制文本,复制出的文本存在丢失 (纪录不少,但部分纪录的文本丢失).该如何解决呢? 后来跟踪代码发现这个命令没 ...

  4. sharepoint 开发相关工具总结

    1.CAML Designer 2013 开发caml用 http://biwug-web.sharepoint.com/SitePages/Caml_designer.aspx 2.SharePoi ...

  5. 关于Android Force Close 出现的原因 以及解决方法

    一.原因: forceclose,意为强行关闭,当前应用程序发生了冲突. NullPointExection(空指针),IndexOutOfBoundsException(下标越界),就连Androi ...

  6. Phonegap 之 iOS银联在线支付(js调用ios端银联支付控件)

    Phonegap项目,做支付的时候,当把网站打包到ios或android端成app后,在app上通过wap调用银联在线存在一个问题: 就是当从银联支付成功后,再从服务器返回到app客户端就很难实现. ...

  7. Mac wifi已打开但尚未连接到网络

    把网络偏好设置  里面的询问新网络 关闭了   然后  重启电脑  试一下  应该就可以了

  8. 按钮在cell上的高亮状态出现的慢

    在单元格上放一个全屏长的按钮  高度不是cell的高度    当点击cell上的按钮的时候   按钮的高亮状态会出现的比较慢   因为按钮设置的就是touchUpInside   所以当你向下按的时候 ...

  9. UEditor无法复制的解决方法

    今天终于知道UEditor不能复制的真正原因啦,还是自己一直没有仔细研究. UEditor 粘贴 Excell 中的表格时报错导致无法粘贴的解决办法 在UEditor一些版本中,如果粘贴Excell中 ...

  10. MyEclipse Servers视窗出现“Could not create the view: An unexpected exception was thrown”错误的解决办法

    打开myeclipse所在的wordspace文件夹,在下面子文件夹 .metadata\.plugins\org.eclipse.core.runtime\.settings删除 com.genui ...