401 в приложении ionic 3 получает токен из локального хранилища на перехватчики

Question

У меня проблема в том, что если я переключаюсь на страницу в моем ионном приложении, первый вызов происходит каждый раз 401. Если я перезагружаю страницу, все работает в соответствии с требованиями.

это мои http перехватчики:

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import { Storage } from '@ionic/storage';

@Injectable()
export class MyAppHttpInterceptor implements HttpInterceptor {
  token: string;
  constructor(public storage: Storage) {
    storage.get('token').then((val) => {
      this.token = val;
    })
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      headers: req.headers.set('Authorization',
        `Bearer ${this.token}`)
    });
    return next.handle(req)
      .catch((error) => {
        return Observable.throw(error);
      }) as any;
  }
}

похоже, что память слишком медленная. Это??? Или в чем моя ошибка ^^ У меня проблема на всех системах: браузер (локальное хранилище) и Android.

Я получаю токен из моего API-интерфейса node-express с помощью jwt

Answer 1

Ну, это не обязательно медленно, но storage.get() - это асинхронный вызов, поэтому очень вероятно, что ваша переменная токена все еще не определена, когда вы выполняете вызов http. Вы можете легко проверить это с помощью точки останова или с помощью console.log (this.token).

Поэтому я предлагаю вам создать общего 'провайдера' (в ионном выражении), в котором хранится токен (и вы можете добавить в него все свои глобальные переменные), затем внедрить провайдера в перехватчик и просто использовать значение:)

https://www.joshmorony.com/how-why-and-when-to-use-providers-in-ionic-2/