Igor Simic
4 years ago

Angular interceptor request and response example




How to intercept request and response in Angular 6 and ad token to request? Well we will do all of that in this example.
Idea: create service which will be intercept every request and response. In case of request, we will modify header and ad token to it, and in case of response we will just create two different console logs in case of response error and i case when everything goes OK.

So first, let's create service, we will call it intercept service and it will be placed in services folder.

Open command line tool and type this:
ng g service services/intercept // g stands for generate

Open intercept.service.ts and paste this code:
import { Injectable } from '@angular/core';
import {AuthService} from '../services/auth.service';
import {
  HttpEvent, 
  HttpInterceptor, 
  HttpHandler, 
  HttpRequest,
  HttpResponse
} from '@angular/common/http'
import { Observable } from 'rxjs';
import { catchError,tap} from 'rxjs/operators';


@Injectable()//{providedIn: 'root'}

export class InterceptService  implements HttpInterceptor {

	constructor(private authService: AuthService) { }

	// intercept request and add token
  	intercept(request: HttpRequest<any>, next: HttpHandler):Observable<HttpEvent<any>> {

    	// modify request
	    request = request.clone({
	      setHeaders: {
	        Authorization: `Bearer ${localStorage.getItem('MY_TOKEN')}`
	      }
	    });
	   
	   	console.log("----request----");

	 	console.log(request);

	 	console.log("--- end of request---");
 

	    return next.handle(request)
	    .pipe(
	        tap(event => {
	          if (event instanceof HttpResponse) {
	             
	            console.log(" all looks good");
	            // http response status code
	            console.log(event.status);
	          }
	        }, error => {
	   			// http response status code
	          	console.log("----response----");
	          	console.error("status code:");
	          	console.error(error.status);
	          	console.error(error.message);
	          	console.log("--- end of response---");

	        })
	      )

    };
  
 
}



now let's add our service to app.module.ts
....
import { InterceptService} from './services/intercept.service';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';


......
@NgModule({
  declarations: [
    ...
   ],
  imports: [
   ...,
    HttpClientModule
  ],
  providers: [InterceptService,
      {
        provide: HTTP_INTERCEPTORS,
        useClass: InterceptService,
        multi: true
      }
    ], 
  bootstrap: [AppComponent]
})

And here is the example of modified request with included token in a header and response

Example of using interceptor in Angular 6 to modify request and show response


If you like to show notification or error message when status is 4xx, check this post:

Angular 6 Material Snack Bar - fire when interceptor throws a error