离子 3 + 离子存储 jwt 令牌中的 HttpInterCepter

Question

我已经创建了 http 拦截器类，用于向我的 rest api 添加标头，并且 http 拦截器类运行良好，但是当我将离子存储与 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) {

  }

}

auth service.ts

  async getToken(key){

    return await this.storage.get(key);

  }

  setToken(token){

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

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

Answer 1

离子存储与window localStorage 过于相似。您也可以使用 window localStorage。 我正在为您的问题提供解决方案，它适用于 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 *注：注入tokenService并遵循拦截器方法

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

在 app.module.ts 中

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