Question

我使用Ionic 4来创建一个应用程序。我尝试实现一个HttpInterceptor来将Bearer Authorization令牌添加到请求中。

问题：在读取令牌之前发送请求

更多详细信息：

我尝试从本地存储读取令牌
下面的 console.log 打印出令牌

怎么了？

import {HttpRequest,HttpHandler,HttpEvent,HttpInterceptor,HttpResponse,HttpErrorResponse} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

    token:any;

    constructor(private router: Router,private storage: Storage) {
        this.storage.get('User').then((val) => {
            this.token = val;
            console.log(val); // Returns the token
        });
    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

      console.log(this.token); // Returns undefined
      if (this.token) {
        request = request.clone({
          setHeaders: {
            'Authorization': this.token
          }
        });
      }

      if (!request.headers.has('Content-Type')) {
        request = request.clone({
          setHeaders: {
            'content-type': 'application/json'
          }
        });
      }

      request = request.clone({
        headers: request.headers.set('Accept', 'application/json')
      });

      return next.handle(request).pipe(
        map((event: HttpEvent<any>) => {
          if (event instanceof HttpResponse) {
            console.log('event--->>>', event);
          }
          return event;
        }),
        catchError((error: HttpErrorResponse) => {
          if (error.status === 401) {
            if (error.error.success === false) {
              // this.presentToast('Login failed');
            } else {
              this.router.navigate(['/']);
            }
          }
          return throwError(error);
        }));
    }

}

Answer 1

对存储的调用返回Promise，因此是异步的。获取拦截函数中的令牌。由于拦截函数需要一个Observable，因此可以使用RxJS转换存储调用：

import { from } from 'rxjs';
import { mergeMap } from "rxjs/operators";

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {


    return from(this.storage.get('User')).pipe(
        mergeMap((val) => {
            // clone and modify the request
            request = request.clone({
                setHeaders: {
                    Authorization: val
                }
            });
            [...more stuff you want]
            return next.handle(request);
        });
     )
}

我没有测试此功能，但希望您能理解。也许添加一个if else语句和该令牌作为局部变量，以便在每次调用时都不会从存储中读取它。

token:string;
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    if(!this.token)
    return from(this.storage.get('User')).pipe(
        mergeMap((val) => {
            this.token = val
            [... modify and return request headers like above]
        })
    )
    else{ 
        [... use this.token for headers ]
    }
}

在Ionic 4中如何使用HttpInterceptor发送请求之前如何获取Bearer Auth令牌

1 个答案: