Ionic 3 + HttpClientModule and token from storage

Question

I have build an interceptor for making HTTP requests to a PHP backend. This backend gives an JWT token to the app and I save this in the Ionic Storage. But I want to get that token from Storage and add it as an header to the HTTP request.

Below is my interceptor with and hardcoded token. This works and I get a response from the backend.

See update @ bottom of this post

http-interceptor.ts

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

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const changedReq = req.clone({headers: req.headers.set('Authorization', 'Bearer MY TOKEN')});
        return next.handle(changedReq);
    }

}

But how do I get the token from storage into the header. I searched alot and most of the tutorials / examples are from the older HTTP module. If someone has an idea or has a up2date example ?

UPDATE

Oke below code send the token

intercept(req: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{
        return fromPromise(this.Auth.getToken())
            .switchMap(token => {
                const changedReq = req.clone({headers: req.headers.set('Authorization', 'Bearer ' + token )});

                return next.handle(changedReq);
            });
    }

With 1 exception, namely the first time I access that page :)

Answer 1

You can save JWT token in, for example, localStorage

 localStorage.setItem('myToken', res.token);

and then access it with

localStorage.getItem('myToken');

In your case something like this:

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

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const changedReq = req.clone({headers: req.headers.set('Authorization', localStorage.getItem('myToken'))});
        return next.handle(changedReq);
    }

}

If you want to use Ionic Storage

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

   @Injectable()
    export class TokenInterceptor implements HttpInterceptor {

    constructor(public _storage: Storage) {
         _storage.get('myToken').then((val) => {
         console.log('Your age is', val);
         });
    }

       intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
            const changedReq = req.clone({headers: req.headers.set('Authorization', this.val)});
            return next.handle(changedReq);
        }

    }