AuthService.ts

import { Injectable } from '@angular/core';
import {
  HttpRequest, HttpClient,
} from '@angular/common/http';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Subject, Observable } from 'rxjs/Rx';
import { AppConstant } from '../app.constant';

@Injectable()
export class AuthenticationService {

  private url = AppConstant.BASE_URL + "oauth/token";

  constructor(
    private http: Http
  ) { }

  public getToken(): string {
    let refresh_token = localStorage.getItem('access_token');
    if (refresh_token !== undefined && refresh_token !== null) {
      refresh_token = refresh_token.split('"')[1] !== undefined && refresh_token.split('"')[1] !== null ? refresh_token.split('"')[1] : refresh_token;
    }
    return refresh_token;
  }

  public getRefreshToken(): string {
    let refresh_token = localStorage.getItem('refresh_token');

    if (refresh_token !== undefined && refresh_token !== null) {
      refresh_token = refresh_token.split('"')[1] !== undefined && refresh_token.split('"')[1] !== null ? refresh_token.split('"')[1] : refresh_token;
    }
    return refresh_token
  }



  refreshToken() {
    let h = new Headers(
      {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': 'Basic ' + btoa("foo:foo123"),
        "cache-control": "no-cache"
      });


    let options = new RequestOptions({ headers: h });
    
    let body = `refresh_token=${this.getRefreshToken()}&grant_type=refresh_token`;

    return this.http.post(this.url, body, options);
    // return Observable.of(this.authTokenNew).delay(200);
  }
  cachedRequests: Array<HttpRequest<any>> = [];

  public collectFailedRequest(request): void {
    this.cachedRequests.push(request);
  }



}

token-interceptor.ts

import { Injectable, Injector } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { AuthenticationService } from './authentication.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { Subject, BehaviorSubject } from 'rxjs';
import { Router } from '@angular/router';
import { StorageService } from './storage.service';
import { LoaderService } from './loader.service';
import { RestApiService } from './rest-api.service';
import { flatMap, catchError, finalize } from 'rxjs/operators';
import { longStackSupport } from 'q';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
    authService;
    refreshTokenInProgress: boolean = false;
    tokenSubject: BehaviorSubject<string> = new BehaviorSubject<string>(null);


    constructor(
        // public auth: AuthenticationService,
        private storage: StorageService,
        private router: Router,
        private loader: LoaderService,
        private injector: Injector
    ) { }


    addAuthHeader(request) {
        //let auth = this.injector.get(AuthenticationService);
        const token: string = localStorage.getItem('access_token');
        if (token) {
            request = request.clone({
                headers: request.headers.set(
                    // Accept: 'application/json',
                    // 'Content-Type': 'application/json',
                    'Authorization', `Bearer ${this.authService.getToken()}`
                )
            });

        } else {
            let header = 'Basic ' + btoa("foo:foo123");
            request = request.clone({
                headers: request.headers.set(
                    // Accept: 'application/json',
                    //'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization', header
                ),

            });
            request = request.clone({ headers: request.headers.set('Content-Type', 'application/x-www-form-urlencoded') });
        }
        return request;
    }



    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        debugger
        this.authService = this.injector.get(AuthenticationService);
        request = this.addAuthHeader(request);
        if (this.refreshTokenInProgress) {
            let currentTime = new Date().getTime();
            while (currentTime + 3000 >= new Date().getTime()) {
                console.log('prewaiting before request ', request)
            }
        }
        console.log('Request on inteceptor to process ', request)
        // let authenticationService = this.injector.get(AuthenticationService);
        return next.handle(request).do((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
                console.log(event);
                // do stuff with response if you want
            }
            if (event instanceof HttpErrorResponse) {
                console.log('Http error response section ', event);
            }
        }, (err: any) => {
            if (err.status === 401) {
                console.log('starting to process error response of ', request)
                this.refreshTokenInProgress = true;
                // this.handleFailed401Request(request, next);
                // this.authService.collectFailedRequest(request);
                this.authService.refreshToken().toPromise().then(resp => {
                    console.log('response recieved for refresh token ', resp, ' but the request was ', request);
                    let data = JSON.parse(resp._body);
                    this.storage.setItem("access_token", data['access_token']);
                    this.storage.setItem("refresh_token", data['refresh_token']);
                    let date = new Date();
                    date.setSeconds(date.getSeconds() + parseInt(data['expires_in']));
                    this.refreshTokenInProgress = false;
                    // this.retryFailedRequests(request, next);

                    // return next.handle(this.addAuthHeader(request));
                }, (error) => {
                    console.log("erorr occured while ", request)
                    this.logout();
                    this.refreshTokenInProgress = false;
                });
            } else {
                console.log("erorr occured ", request)
                return Observable.throw(err);
            }
            if (this.refreshTokenInProgress) {
                console.log("forwarding request to call ", request);
                ///return this.intercept(request, next);
                 request = this.addAuthHeader(request);
                let nextrequest : HttpHandler = next;
                return nextrequest.handle(request).do((event: HttpEvent<any>) => {
                    if (event instanceof HttpResponse) {
                        console.log(event);
                        // do stuff with response if you want
                    }
                    if (event instanceof HttpErrorResponse) {
                        console.log('Http error response section in sub error', event, ' for request ', request);
                    }
                }, (error) => {
                    console.log('error block', request);
                });
            }
        });
    }


    retryFailedRequests(request, next) {
        // retry the requests. this method can
        // be called after the token is refreshed
        this.authService.cachedRequests.forEach(request => {
            request = request.clone({
                setHeaders: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    Authorization: `Bearer ${this.authService.getToken()}`
                }
            });
            return next.handle(request);
        });
    }

    logout() {
        this.storage.removeAll();
        this.router.navigate(['/signin']);
        this.loader.hideMenuBar();
        // return observableThrowError("");
    }

}