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

例如,对于身份验证,如果服务器返回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. http gzip 解压缩

    var sContentEncoding = httpRespone.Headers["Content-Encoding"]; if(sContentEncoding == &qu ...

  2. jquery多次上传同一张图片

    $().reset(); wrap():$('p').wrap('div');===><div><p></p></div>; .closest() ...

  3. Electron笔记

    一个能让你用Web技术开发桌面应用的开源项目.这里做一个笔记(非正式文章): 官网地址:http://electron.atom.io/ API相关 Electron提供的主进程接口.渲染进程接口.共 ...

  4. JavaScript学习笔记-实例详解-类(二)

    实例详解-类(二)   //===给Object.prototype添加只读\不可枚举\不可配置的属性objectId(function(){ Object.defineProperty(Object ...

  5. js控住DOM实现发布微博简单效果

    这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为: <!DOCTYPE html> <html lang="en&quo ...

  6. ABAP语言常用的系统字段及函数

    常用的系统变量如下: 1. SY-PAGNO当前页号 2. SY-DATUM当前时间 3. SY-LINSZ当前报表宽度 4. SY-LINCT当前报表长度 5. SPACE空字符 6. SY-SUB ...

  7. SharePoint 2013 搭建负载均衡(NLB)

    服务器架构(三台虚机:AD和Sql在一台,前端两台) DC.Sql Server,其中包括:AD.DNS.DHCP服务(非必须): SPWeb01,其中包括:IIS.SharePoint: SPWeb ...

  8. SharePoint 2013 列表关于大数据的测试<二>

    1.给测试列表添加查阅项字段,100个,代码如下: 2.插入测试数据的方法,注意查阅项字段的格式,代码如下: 3.插入10w条数据,时间花费如下(不建议List[LISTNAME].Items.Add ...

  9. JSOM 对User的操作

    一.操作当前用户 //Load current user info function LoadCurUser() { var curUser; curUser = curWeb.get_current ...

  10. 网站错误记录:A transport-level error has occurred when sending the request to the server.

    今天查看公司项目的日志文件,发现有这个错误:A transport-level error has occurred when sending the request to the server. 感 ...