Ionic 5使用IonicStorage在HTTP调用中获取JWT发送头

debugcn 发表于 Dev

然后打电话

我正在将一个有角度的Web应用程序移植到Ionic，但遇到了麻烦。

用例-我想获取存储在IonicStorage中的jwt令牌作为userAttributes并将其发送到帖子标头中。

userAttributes = {name:"SomeName",token:**theJWTToken**}

由于IonicStorage返回Promise，因此我无法遵循之前的流程。我对Promises and Observables不感兴趣。需要一些有关如何从IonicStorage提取令牌到options变量并将其发送到http post的建议。

以前我曾经做过如下

 getOptions(){
    let headers = new HttpHeaders({
      'X-AUTH-TOKEN': JSON.parse(localStorage.getItem('userAttributes')).token
    });
    let options = { headers: headers, withCredentials: true };
    return options;
  }

resetTokenLink(){
    var options = this.getOptions();
    return this.http.post(environment.APIBaseURL+"/resendToken",'',options);
  }

verifyMail.page.ts

 resend(){  
    this.loginService.resetTokenLink().subscribe(
      res => {this.showAlert("Success",res['msg'])},
      err => {this.showAlert("Error",err.error)}
    );
  }

然后打电话

在浏览了多种形式和博客之后，我找到了一种使之起作用的方法。

解决方案：我创建了一个HTTPInterceptor，它可以拦截所有HTTP调用并将其添加到所需的标头中。

拦截器服务

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Storage } from '@ionic/storage';

import { Observable,from } from 'rxjs';
import {  throwError } from 'rxjs';
import { AlertController } from '@ionic/angular';
import { map, catchError, switchMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class InterceptorService implements HttpInterceptor  {


  constructor(private alertController: AlertController, private storage: Storage) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      return from(this.storage.get('userAttributes'))
          .pipe(
              switchMap(token => {               
                  request = request.clone({ headers: request.headers.set('X-AUTH-TOKEN', token.token ) });
                  request = request.clone({ headers: request.headers.set('Content-Type', 'application/json') });
                  request = request.clone({ url:request.url });
                  return next.handle(request).pipe(
                      map((event: HttpEvent<any>) => {
                          if (event instanceof HttpResponse) {
                              // do nothing for now
                          }
                          return event;
                      }),
                      catchError((error: HttpErrorResponse) => {
                          const status =  error.status;
                          const reason = error && error.error.reason ? error.error.reason : '';

                          this.presentAlert(status, reason);
                          return throwError(error);
                      })
                  );
              })
          );


  }

  async presentAlert(status, reason) {
      const alert = await this.alertController.create({
          header: status + ' Error',
          subHeader: 'Subtitle',
          message: reason,
          buttons: ['OK']
      });

      await alert.present();
  }
}

将拦截器添加到NGModule提供程序-app.modules.ts。

import { HttpClientModule ,HTTP_INTERCEPTORS} from '@angular/common/http';

.
.
other code
.
.

 providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
 --->   { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true },

  ],

现在，所有请求都将具有提到的标头。

一些参考资料有助于：

https://forum.ionicframework.com/t/ionic-4-storage-token-access-for-http-interceptor/158822

https://ionicacademy.com/ionic-http-interceptor/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。