Angular 7 - Как заставить API-вызовы ждать окончания HTTPInterceptor до sh, прежде чем делать дополнительные вызовы API?

Question

В Angular 7 я использую HttpInterceptor для получения токена Bearer, который необходимо добавить в качестве заголовка для любых вызовов API (например, getOnLoadData ()). Всякий раз, когда я пытаюсь выполнить вызов getOnLoadData (), перехватчик вызывается успешно, но значение токена продолжает возвращаться как ноль, потому что оно выполняется до завершения перехватчика.

Я пытаюсь использовать async / await сделать вызов асинхронным, но похоже, что я делаю это неправильно, и я не могу понять, где ошибка. Я довольно новичок в Angular. Я искал довольно много разных примеров, но не могу понять.

HTTPInterceptor

intercept(req: HttpRequest<any>, next: HttpHandler) {
    return from(this.handle(req, next))
  }

  async handle(req: HttpRequest<any>, next: HttpHandler) {
    const result = await this.getBearerToken();

    const tokenizedReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${result}`
      }
    })

    return next.handle(tokenizedReq).toPromise();
  }

Вызов API

async getOnLoadData() {
    await this.tokenInterceptorService.getBearerToken()

    return this.httpClient.get('/initialloaddata', {
      headers
    });
  }

Answer 1

Вам необходимо создать поток данных, который начинается с выборки токена авторизации и заканчивается пропатченным запросом, если это необходимо.

public intercept(request: HttpRequest<void>, next: HttpHandler): Observable<HttpEvent<void>> {
    return from(this.getBearerToken()).pipe(
        switchMap(token =>
            iif(
                () => !token,
                of(request),
                of(
                    request.clone({
                        setHeaders: {
                            'Authorization': `Bearer ${token}`,
                        },
                    }),
                ),
            ),
        ),
        switchMap(clonedRequest => next.handle(clonedRequest)),
    );
}

from знает, как преобразовать обещание в наблюдаемое поток данных. поэтому он решает его и передает результат (токен) в канал. тогда у нас есть switchMap, который проверяет наличие токена. Если нет (оператор iif), он возвращает исходный запрос без изменений (2-й аргумент iif), если да, то он возвращает клон с желаемым заголовком. После этого у нас есть еще один switchMap, который просто переключает поток данных на next.handler.