Angular 离子型3+；离子存储jwt令牌

我创建了http拦截器类，用于向rest api添加头，http拦截器类运行良好，但当我将ionic storage与http拦截器合并时，会出现一些问题。我知道存储是异步的。因此http拦截器不会从存储获取值，或者在从存储获取值之前执行

我的应用程序流如下->

 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.

下面给出了我的代码。我想实现http拦截器

令牌拦截器.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) {

  }

}

  async getToken(key){

    return await this.storage.get(key);

  }

  setToken(token){

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

---

任何解决方法..请帮助..我只需要存储中的api令牌，然后只将其添加到拦截器中

离子存储与Windows localStorage非常相似。您也可以使用WindowLocalStorage。 我为您的问题提供解决方案，它适用于ionic 3/4 http拦截器。创建令牌服务并将其作为可观察的。按照这个方法

注意：当你提出这个问题时，它可能是Angular 5、ionic 3和Rxjs较低版本，而不是6，但目前我使用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 *注意：注入令牌服务并遵循拦截器方法

 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))
 );
 }
}

---

好的，让我查一下

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