Как да получите маркера за удостоверяване на носителя, преди да изпратите заявката с помощта на 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

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