Setting default requests header from ionic storage using http interceptor - Angular 5 - Ionic 3

Question

I'm trying to set a token value in all request headers using angular 5 new HTTP client. Below is my code:

import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';
import {Observable} from "rxjs/Observable";
import { Storage } from '@ionic/storage';
import {Globals} from '../globals/globals';

@Injectable()
export class Interceptor implements HttpInterceptor {
  token: string;
  constructor(private storage: Storage, private global: Globals){ 
    this.storage.get('token').then((val) => {
      this.token = val;
    });
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log(this.token) //undefined "only for first time on app start"
    req = req.clone({
      setHeaders: {
        'Token': this.token,
        'Version': this.global.version,
      }
    });
    return next.handle(req);
  }
}

While adding the token in request header works, but there is a bad exception. It doesn't work for the first time. The problem is with js async nature, req.clone gets executed before getting token from the storage. Because Ionic storage returns promise, so how to handle this situation for the first time?

sebaferreras · Accepted Answer · 2018-01-19 14:22:28Z

4

You can merge both async request (getting the token and handling the request) to execute the later when the token is ready (instead of getting it in the constructor):

// -------------------------------------------------------------------------
// Please note that I'm using lettable/pipeable operators (RxJS > 5.5.x)
// https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md
// -------------------------------------------------------------------------

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from "rxjs/Observable";
import { Storage } from '@ionic/storage';
import { Globals } from '../globals/globals';

// New imports!
import { fromPromise } from 'rxjs/observable/fromPromise';
import { mergeMap } from 'rxjs/operators/mergeMap';

@Injectable()
export class Interceptor implements HttpInterceptor {

  constructor(private storage: Storage, private global: Globals){ }

  getToken(): Promise<any> {
    return this.storage.get('token');
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return fromPromise(this.getToken()).pipe(
        mergeMap(token => {

            // Use the token in the request
            req = req.clone({
                setHeaders: {
                    'Token': token,
                    'Version': this.global.version,
                }
            });

            // Handle the request
            return next.handle(req);
        }));
  }
}

edited Jan 19, 2018 at 14:22

answered Jan 19, 2018 at 13:30

sebaferreras

44.7k11 gold badges120 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

nishil bhave Over a year ago

Hi @sebaferreras, thanks for the help! Unfortunately it is giving me error on return fromPromise(this.getToken).pipe( such as

Argument of type '(): Promise<any>' is not assignable to parameter of type 'PromiseLike<{}>' property 'then' is missing in '(): Promise<any>'

.

sebaferreras Over a year ago

Oh what a silly mistake. That line should be return fromPromise(this.getToken()).pipe (notice the () after getToken) to actually call that method. @nishilbhave

nishil bhave Over a year ago

Ohh yeah! It worked like a charm. Thank you so much bro.

George Over a year ago

this works well thank you, its weird that we have to do this in order to use the data from storage out of the scope of the storage.get() promise.

sebaferreras Over a year ago

Glad to hear that it helped @George. Yeah, sometimes working with async methods may seem a little bit tricky.

|

Collectives™ on Stack Overflow

Setting default requests header from ionic storage using http interceptor - Angular 5 - Ionic 3

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related