title: Call interceptor only once when component calls multiple API
body: <p>I have Multiple API in a single component, where on token expire interceptor runs multiple times, for example, if I have 4 GET API in a single component then 4 times interceptor will run on token expire</p>
  
  <p>Below is the code for interceptor</p>
  
  <p>my.httpInterceptor.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {
    Injectable
  } from "@angular/core";
  import {
    tap
  } from "rxjs/operators";
  import {
    ToastyService,
    ToastOptions
  } from 'ng2-toasty';
  import {
    Router
  } from "@angular/router";
  import {
    _throw
  } from 'rxjs/observable/throw';
  import 'rxjs/add/operator/do';
  import 'rxjs/Observable';
  import {
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpInterceptor,
    HttpResponse,
    HttpErrorResponse,
    HttpHeaders
  } from "@angular/common/http";
  import {
    Observable
  } from "rxjs/Observable";
  
  @Injectable()
  export class MyInterceptor implements HttpInterceptor {
    constructor(private router: Router, private toastyService: ToastyService, ) {}
  
    //function which will be called for all http calls
    intercept(
      request: HttpRequest &lt; any &gt; ,
      next: HttpHandler
    ): Observable &lt; HttpEvent &lt; any &gt;&gt; {
      //how to update the request Parameters
      if (JSON.parse(localStorage.getItem('userDetails'))) {
        let authToken = JSON.parse(localStorage.getItem('userDetails'));
        if (authToken.currentUserToken != null) {
          const authReq = request.clone({
            headers: new HttpHeaders({
              'Content-Type': 'application/json',
              'Authorization': 'Bearer' + authToken.currentUserToken
            })
          });
          return next.handle(authReq)
            .catch((err) =&gt; {
              if (err) {
                let errorCodes = [404, 500, 422, 412, 424, 409];
                if (errorCodes.includes(err.status)) {
                  let toastOptions: ToastOptions = {
                    title: "Error",
                    msg: "Error",
                    showClose: true,
                    timeout: 5000,
                    theme: 'default'
                  };
                  toastOptions.msg = err.error.errors.name;
                  this.toastyService.error(toastOptions);
                }
                if (err.status === 401) {
                  this.router.navigate(['/']).then((nav) =&gt; {
                    // debugger;
                    if (nav) {
                      if (this.router.url === '/') {
                        setTimeout(() =&gt; {
                          let toastOptions: ToastOptions = {
                            title: "Session Expired",
                            msg: "Please login again to access",
                            showClose: true,
                            timeout: 5000,
                            theme: 'default',
                          }
                          // toastOptions.msg = "Session Expired";
                          this.toastyService.error(toastOptions);
                        });
                      }
                    }
                  });
                }
                return _throw(err.message);
              }
            });
        }
      } else {
        const updatedRequest = request.clone({
          headers: new HttpHeaders({
            'Content-Type': 'application/json',
          })
        });
        return next.handle(updatedRequest)
      }
    }
  
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to avoid calling interceptor multiple times.</p>