HttpClient, Interceptor

Author: ricsard

src/app/app.module.ts

@@ -6,6 +6,8 @@ import { AppComponent } from './app.component';
 import {MatButtonModule, MatIconModule, MatInputModule} from '@angular/material';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {FlightModule} from './flight/flight.module';
+import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
+import {AuthInterceptorService} from './core/auth-interceptor.service';
 
 @NgModule({
   declarations: [
@@ -18,9 +20,16 @@ import {FlightModule} from './flight/flight.module';
     MatInputModule,
     MatIconModule,
     BrowserAnimationsModule,
-    FlightModule
+    FlightModule,
+    HttpClientModule
+  ],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: AuthInterceptorService,
+      multi: true
+    }
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/core/auth-interceptor.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthInterceptorService } from './auth-interceptor.service';
+
+describe('AuthInterceptorService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: AuthInterceptorService = TestBed.get(AuthInterceptorService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/auth-interceptor.service.ts

@@ -0,0 +1,22 @@
+import {Injectable} from '@angular/core';
+import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
+import {Observable} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthInterceptorService implements HttpInterceptor {
+
+  constructor() {
+  }
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    const token = '123456abcde';
+    if (token) {
+      const authReq = req.clone({headers: req.headers.set('Authorization', token)});
+      return next.handle(authReq);
+    } else {
+      return next.handle(req);
+    }
+  }
+}

src/app/flight/flight.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {FlightService} from './flight.service';
 
 @Component({
@@ -9,10 +9,12 @@ import {FlightService} from './flight.service';
 export class FlightComponent implements OnInit {
   flights: any;
 
-  constructor(private flightService: FlightService) { }
+  constructor(private flightService: FlightService) {
+  }
 
   ngOnInit() {
-    this.flights = this.flightService.listFlights();
+    this.flightService.listFlights()
+      .subscribe(data => console.log(data), e => console.log(e), () => console.log('complete'));
   }
 
 }

src/app/flight/flight.service.ts

@@ -1,13 +1,23 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {Observable} from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class FlightService {
 
-  constructor() { }
+  constructor(private http: HttpClient) {
+  }
+
+  listFlights(): Observable<any> {
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        'Authorization': 'my-auth-token'
+      })
+    };
 
-  listFlights() {
-    return '["Flights"]';
+    return this.http.get(`/someUrl`, httpOptions);
   }
 }