Как получить токен Bearer Auth перед отправкой запроса с использованием HttpInterceptor в Ionic 4

Question

Я использую Ionic 4 для создания приложения.Я пытаюсь реализовать HttpInterceptor для добавления токена авторизации на запросы к запросам.

Проблема : запрос отправляется до чтения токена

Подробнее:

1. Я пытаюсь прочитать токен из локального хранилища
2. 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 ]
    }
}