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 } }

时间: 2024-07-31 17:04:58

AngularJS 拦截器的相关文章

AngularJS 拦截器和好棒例子

Interceptors in AngularJS and Useful Examples 有日期,我喜欢. $httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们希望俘获响应,并且在完成完成调用之前处理它.一个很好例子就是处理全局 http 异常.拦截器(Interceptors)应运而生.本文将介绍 AngularJS 的拦截器,并且给几个有用的例

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

$httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们希望俘获响应,并且在完成完成调用之前处理它.一个很好例子就是处理全局 http 异常.拦截器(Interceptors)应运而生.本文将介绍 AngularJS 的拦截器,并且给几个有用的例子. 什么是拦截器? $httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一

(转)Angular中的拦截器Interceptor

什么是拦截器? 异步操作 例子 Session 注入(请求拦截器) 时间戳(请求和响应拦截器) 请求恢复 (请求异常拦截) Session 恢复 (响应异常拦截器) 转之:http://my.oschina.net/ilivebox/blog/290881?p=1 原文:Interceptors in AngularJS and Useful Examples $httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有

Angularjs注入拦截器实现Loading效果

angularjs作为一个全ajax的框架,对于请求,如果页面上不做任何操作的话,在结果烦回来之前,页面是没有任何响应的,不像普通的HTTP请求,会有进度条之类. 什么是拦截器? $httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂.下面的例子告诉你怎么创建一个拦截器: <!-- lang: js --> module.factory('myInterceptor', ['$log', function($log) {

AngularJs HTTP响应拦截器实现登陆、权限校验

$httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们希望俘获响应,并且在完成完成调用之前处理它.一个很好例子就是处理全局 http 异常.拦截器(Interceptors)应运而生.本文将介绍 AngularJS 的拦截器,并且给几个有用的例子. 什么是拦截器? $httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一

关于angularJs的拦截器的使用

拦截器,在JavaScript中就是拦截http请求.它不仅可以拦截request,还可以拦截response. 拦截request是为了在请求发送前设置一些配置,比如在header中添加一些信息.如果每个请求都要添加一些配置数据,就可以使用request拦截.拦截response是为了在获得服务器返回的数据后,ajax处理数据前先对数据做一些处理,这样就不需要在每一次ajax中处理了,减少代码量. 具体的看下面的例子: angular.module('demo') //this service

java web 过滤器跟拦截器的区别和使用

1.首先要明确什么是拦截器.什么是过滤器 1.1 什么是拦截器: 拦截器,在AOP(Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加入某些操作.拦截是AOP的一种实现策略. 在Webwork的中文文档的解释为--拦截器是动态拦截Action调用的对象.它提供了一种机制可以使开发者可以定义在一个action执行的前后执行的代码,也可以在一个action执行前阻止其执行.同时也是提供了一种可以提取action中可重用的部分的方式.

微信小程序之页面拦截器

场景 小程序有52个页面,其中13个页面无需任何身份,另外39个页面需要系统角色.对于这39个页面,如果微信用户没有系统角色,则跳转到登录页.是否有系统角色信息需要通过异步请求来获取. 需求分析&实现 对需求进行抽象,其实要的就是一个过滤器,对小程序页面的访问进行过滤,符合条件的通过,不符合条件进行其他处理. 使用过php的laravel框架的童鞋,肯定一下子就联想到了laravel框架的http中间件:HTTP 中间件提供一个方便的机制来过滤进入应用程序的 HTTP 请求,例如,Laravel

SpringMvc拦截器小测试

前言 俗话说做项目是让人成长最快的方案,最近小编写项目的时候遇到了一个小问题.小编在项目中所负责的后台系统,但是后台系统是通过系统的页面是通过ifame联动的,那么这时候问题就来了,后台所做的所有操作都是联动操作(都是基于所联动的)那么我后台所做的所有操作都是基于后台用户登录的情况下所做的.但是在联动中中所有页面都是单独存在的,如果要解决这个问题就需要在做操作之前判断用后台用户是否已经登录.想知道小编是如何实现的那就接着往下看. 简介 Spring MVC的拦截器不仅可实现Filter的所有功能