AngularJS interceptor and angularjs interceptor

AngularJS interceptor and angularjs interceptor

It is a good method to intercept an authentication request before it is sent to the server or when it is returned from the server.

For example, for authentication, if the server returns a 401 status code, the user is redirected to the logon page.

AngularJS provides a way to process the response from the global layer through the interceptor.

The Interceptor is the basic middleware of the $ http service. It is used to inject new logic into the application's business process.

There are four types of interceptors, two are successful, and two are failed.

Request AngularJS sets an object through $ http to call the request interceptor. ResponserequestErrorresponseError

Use the interceptor in two steps:

Create an interceptor in the. factory () method, and then use $ httpProvider to register the interceptor in. config:

Angular. module ("myApp", [])

. Factory ("myInterceptor", function ($ q ){

Var interceptor ={}; return interceptor;}); // Step 1

Angular. module ("myApp", [])

. Config (function ($ httpProvider ){

$ HttpProvider. interceptors. push ("myInterceptor ");}); // Step 2

Set $ httpProvider

You can use. config () to add specific HTTP headers to all requests, which is useful for identity authentication. The default request header is saved in the $ httpProvider. defaults. headers. common Object. The default format is as follows:

Accept: application/json, text/plain ,*/*

You can use the. config () function to modify or expand these headers.

Angular. module ("myApp", [])

. Config (function ($ httpProvider ){

$ HttpProvider. defaults. headers. common ['x-Requested-by'] = "MyAngularApp ";});

You can also modify these default values through the defaults attribute of the $ http object at runtime, for example

$ Http. defaults. common ['x-auth'] = "RandomString";

Sometimes you only need to set the post type request. The default post request header is

Content-Type: application/json

You can modify or expand the post request header in the. config () function.

Angular. module ("myApp", [])

. Config (function ($ httpProvider ){$ HttpProvider. defaults. headers. post ['x-Posted-by'] = "MyAngularApp ";});

In an article called 《Interceptors in AngularJS and Useful Examples By Naor YehudaeyThis method is called Token-Based authentication. When a user logs on to the server, he or she obtains a sessionToken from the background, sessionToken identifies each user on the server and is included in each request sent to the server.

The following sessionInjector adds the x-session-token header for each captured request (if the user has logged on)

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") ;}]);

Then create a request:

$ Http. get ("url ");

The configuration object before being intercepted by sessionInjector is as follows:

{"TransformRequest": [null], "transformResponse": [null], "method": "GET", "url": url, "headers": {"Accept ": "application/json, text/plain ,*/*"}}

The configuration object intercepted by sessionInjector is:

{"TransformRequest": [null], "transformResponse": [null], "method": "GET", "url": url, "headers": {"Accept ": "application/json, text/plain ,*/*","X-session-token": 415954427904}}