防止在Angular 2中多次调用Access Token API

Question

I am developing an application in Angular 2 in which there are multiple API calls made at different time periods.

The problem arises when the Access token has expired and needed to be refreshed.

For every API call, I am checking the token status.

When the token has expired the Access token API will be called after which the actual API calling will be executed.

This feature works fine when there is only one API call.

But, when there are N number of API calls when the token has expired, the access token API also gets called N times.

Here is how the current process is,

postRequest(url, body, header): Observable<Object> {
    //Computation of Access token status
    if (needToken) {
        //Token header and body construction
        return this.http.post(token_url, token_body, token_header).map(
            (res: Response) => {
                //Token Success
            }
        )
        .flatMap(
                success =>
                    this.http.post(url, body, header)  //Actual API
        )
        .map((res: Response) => {
            //Actual API Success
        }
    }
    else {
        return this.http.post(url, body, header).map(
            (res: Response) => {
                //API Success
            }
        )
    }
}

If there are multiple API calls at the time of Token expiration, the Token header and body construction processes gets executed and even before the Token API responds, the other APIs call the token API.

Angular prevent multiple token refresh on asynchronous requests

I tried with the above answer but as our function returns Observable, it states that Promise is not assignable to Observable.

I came across many examples of queuing the API requests but none yielded the desired result.

How to queue the calling APIs when there is a call for Token API which is yet to respond and then continue with the queuing APIs?

In this case, when there is already a call to Access token API and when it has returned, the waiting APIs should go to the else part.

Kindly help me with this. Thank you.

Answer 1

According to your demand - here is a snippet of HttpInterceptor implementation with a context of token management: Notice that for a better separation of concerns i used:

A general authService which is the one the responsible for the token management (asking from server , saving in cache, etc').

An action manager - responsible to take the decision where to go next.

import { Injectable } from '@angular/core';

import {HttpRequest,HttpHandler,HttpEvent,HttpInterceptor , HttpResponse , HttpErrorResponse} from '@angular/common/http';
import {Observable} from "rxjs";
import {tap} from "rxjs/operators";

import {HttpHandlerService} from "../../http-handler.service";
import {ActionsService} from "../../../actions/actions.service";
import {AuthService} from "../../../../core/auth/auth.service";


@Injectable({
  providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor{

  constructor(
    private _actionsManager : ActionsService,
    private _authService    : AuthService
  ) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    //Part 1 - adding headers - only for relevant apis
    var accessToken = this._authService.getToken();
    let authorizationHeader = accessToken ?
    {'Authorization' : 'Bearer ' + accessToken                       , 'content-type' : 'application/json'}:
    {'Authorization' : 'Basic '  + this._authService.getBasicToken() , 'content-type' : 'application/x-www-form-urlencoded'};

    request = request.clone({
      setHeaders: authorizationHeader
    });

    //Part 2 - handling request and responses
    return next.handle(request).pipe(
      tap(
        (event: HttpEvent<any>) => {
          if (event instanceof HttpResponse) {
            // do stuff with response if you want
          }
        },
        (err: any) => {
          if (err instanceof HttpErrorResponse) {
            if (err.status === 401 || err.status === 403) {
                               this._actionsManager.onEvent("unAuthorizedResponseFromServer");
            }
          }
        }
      )
    );
  }

}