import { Injectable } from '@angular/core'; import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor, HTTP_INTERCEPTORS } from '@angular/common/http'; import { Observable, of, throwError } from 'rxjs'; import { delay, mergeMap, materialize, dematerialize } from 'rxjs/operators'; import User from '../../models/user'; const users: User[] = [{ username: 'test', password: 'test' },{ username: 'Test', password: 'test' },{ username: 'Test', password: 'Test' }]; @Injectable() export class FakeBackendInterceptor implements HttpInterceptor { intercept(request: HttpRequest, next: HttpHandler): Observable> { const { url, method, headers, body } = request; // wrap in delayed observable to simulate server api call return of(null) .pipe(mergeMap(handleRoute)) .pipe(materialize()) // call materialize and dematerialize to ensure delay even if an error is thrown (https://github.com/Reactive-Extensions/RxJS/issues/648) .pipe(delay(500)) .pipe(dematerialize()); function handleRoute() { switch (true) { case url.endsWith('/users/authenticate') && method === 'POST': return authenticate(); case url.endsWith('/users') && method === 'GET': return getUsers(); default: // pass through any requests not handled above return next.handle(request); } } // route functions function authenticate() { const { username, password } = body; const user = users.find(x => x.username === username && x.password === password); if (!user) return error('Username or password is incorrect'); return ok({ "ACCESS_TOKEN": "fake-jwt-token", "TOKEN_TYPE": "bearer", "EXPIRES_IN": "1440", "MESSAGE_CODE": 1, "MESSAGE_DESCRIPTION": "SUCCESS" }) } function getUsers() { if (!isLoggedIn()) return unauthorized(); return ok(users); } // helper functions function ok(body?: any) { return of(new HttpResponse({ status: 200, body })) } function error(message: any) { return throwError({ error: { message } }); } function unauthorized() { return throwError({ status: 401, error: { message: 'Unauthorised' } }); } function isLoggedIn() { return headers.get('Authorization') === 'Bearer fake-jwt-token'; } } } export let fakeBackendProvider = { // use fake backend in place of Http service for backend-less development provide: HTTP_INTERCEPTORS, useClass: FakeBackendInterceptor, multi: true };