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”); }]AngularJS,);

然后创设一个请求:

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

相关文章