Angular 4.3: HTTP Interceptors are back

With the introduction of a new HttpClient in Angular 4.3, an old feature of Angular.js was re-introduced; HttpInterceptors. Interceptors are sitting between the application and the backend and allow you to transform a request coming from the application before it is actually submitted to the backend. And of course you when a response arrivers from the backend an interceptor can transform it before delivering it to your application logic.

This allows us to simplify the interaction with the backend in our Angular app and hide most of the shared logic inside an interceptor.

Let’s create a simple example that injects an OAuth token in our requests:

	import { Injectable } from '@angular/core';
	import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
	import { Observable } from 'rxjs/observable';
	@Injectable()
	export class OAuthInterceptor implements HttpInterceptor {
	intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
	const authReq = req.clone({
	headers: req.headers.set('Authorization', 'token <your OAuth token>')
	});
	return next.handle(authReq);
	}
	}

view raw OAuthInterceptor.ts hosted with ❤ by GitHub

To be able to use the interceptor, you’ll have to register it:

	mport { BrowserModule } from '@angular/platform-browser';
	import { NgModule } from '@angular/core';
	import { HttpClientModule } from '@angular/common/http';
	import { HTTP_INTERCEPTORS } from '@angular/common/http';
	import { AppComponent } from './app.component';
	import { OAuthInterceptor } from './oauth.interceptor';
	@NgModule({
	declarations: [
	AppComponent
	],
	imports: [
	BrowserModule,
	HttpClientModule
	],
	providers: [{
	provide: HTTP_INTERCEPTORS,
	useClass: OAuthInterceptor,
	multi: true
	}],
	bootstrap: [AppComponent]
	})
	export class AppModule { }

view raw app.module.ts hosted with ❤ by GitHub