HttpInterCepter dans ionic 3 + ionic storage jwt token

Question

J'ai créé une classe d'intercepteur http pour ajouter des en-têtes à mon api de repos et la classe d'intercepteur http fonctionne bien mais quand j'incorpore le stockage ionique avec l'intercepteur http il se pose un certain problème.je sais que le stockage est async.donc l'intercepteur http n'obtient pas la valeur du stockage ou il s'exécute avant d'obtenir la valeur du stockage.

Le déroulement de mon application est le suivant->

 1:user enter the mobile number
 2:check the mobile number in the database
 3:if(found) send otp
 4:verify otp 
 5:send api token to application
 6:now i store the api token into storage.

mon code est donné ci-dessous je veux mettre en œuvre l'intercepteur http

intercepteur de jetons.ts

    import {HttpClient, HttpInterceptor} from '@angular/common/http';
import {Injectable, Injector} from '@angular/core';
import {HttpRequest,HttpHandler,HttpEvent} from "@angular/common/http";
import  {Observable} from "rxjs/Observable";
import {AuthServiceProvider} from "../auth-service/auth-service";

import {Storage} from "@ionic/storage";

/*
  Generated class for the TokenIntercepterProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class TokenIntercepterProvider implements HttpInterceptor{

  apiToken:any;
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    this.auth.getToken('apiToken')
      .then(data=>{
        console.log(data);
        this.apiToken=data;
      })
      .catch()

    const changedReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer ' + this.apiToken)});
    return next.handle(changedReq);

  }

  constructor(private inj:Injector,
              public auth:AuthServiceProvider) {

  }

}

service d'authentification.ts

  async getToken(key){

    return await this.storage.get(key);

  }

  setToken(token){

    this.storage.set('apiToken',token);
  }

J'ai juste besoin d'un jeton d'api à partir du stockage et ensuite seulement il sera ajouté à l'intercepteur.

Answer 1

Le stockage ionique ressemble trop au localStorage de la fenêtre. Vous pouvez également utiliser window localStorage. Je vous propose une solution pour votre problème et cela fonctionne pour ionic 3/4 http interceptor. Créez un service de jeton et obtenez-le comme observable. Suivez la méthode...

Note : Lorsque vous posez cette question, il pourrait s'agir de la version Angular 5, ionic 3, et Rxjs inférieure à la version 6 mais actuellement j'utilise Angular 6, Ionic 4, Rxjs 6

token.service.ts

 import { Storage } from '@ionic/storage';
 import { Injectable } from '@angular/core';
 import { from } from 'rxjs';

 @Injectable({
  providedIn: 'root'
 })
 export class TokenService {
  constructor(private storage: Storage) { }

 getToken() {
 return this.storage.ready().then(() => {
  return this.storage.get('token')
    .then(
      data => {
        return data;
      },
      error => console.error(error)
    );
  });
}

 getTokenAsObservable() {
  return from(this.getToken());
 }
}

http-token-interceptor.service.ts *Note : injecter tokenService et suivre la méthode interceptor

 export class HttpTokenInterceptorService implements HttpInterceptor {
  constructor(private tokenService: TokenService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): 
  Observable<HttpEvent<any>> {
  const tokenObservable =  this.tokenService.getTokenAsObservable()
  .pipe(
    map(token => (
    request = request.clone({
      setHeaders: {
        Authorization: 'Bearer ' + token
      }
     })
   ))
   );
 return tokenObservable.pipe(
  flatMap(req => next.handle(req))
 );
 }
}

Dans app.module.ts

providers: [
     {
     provide: HTTP_INTERCEPTORS,
     useClass: HttpTokenInterceptorService,
     multi: true
    },
 ]