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

Я использую 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);
        }));
    }

}

typescript ionic-framework javascript angular ionic4
person Lucien Dubois    schedule 13.02.2019    source источник
comment
Мне любопытно, если вы поместите console.log ('{CODE_LOCATION}' + this.token) как в конструктор, так и в функцию перехвата, вернет ли это ваш токен?   -  person dmoore1181    schedule 13.02.2019
comment
@ dmoore1181 Он возвращает его для конструктора, но он не определен в функции перехвата. Обновил вопрос.   -  person Lucien Dubois    schedule 13.02.2019
comment
Я просто предлагаю использовать расширенный плагин http для всех HTTP-запросов. https://ionicframework.com/docs/native/http/   -  person Mustafa Lokhandwala    schedule 14.02.2019

Ответы (1)


arrow_upward
4
arrow_downward

Вызовы к хранилищу возвращают обещание и поэтому являются асинхронными. Получите токен внутри функции перехвата. Поскольку функции перехвата требуется 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 ]
    }
}
person Chris    schedule 13.02.2019
comment
Я получаю Object (...) (...). MergeMap не является функцией, а свойство mergeMap не существует для типа Observable ‹any› - person Lucien Dubois; 14.02.2019
comment
@LucienDubois извините, что это было для более старой версии rxjs. Я обновил ответ для rxjs 6. В этом случае вы должны использовать .pipe (mergeMap (...)) - person Chris; 14.02.2019