угловой перехватчик 6 вызывается после отправки запроса

Question

Я работаю над угловым 6 приложением, в котором я хочу добавить jwt-токен в заголовок авторизации каждого запроса.Для этого сценария я хочу использовать перехватчик.

Код выглядит следующим образом:

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let sessionId = localStorage.getItem('sessionId');
    if (sessionId) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${sessionId}`
        }
      });

      console.log("With AuthHeader");
    }

    return next.handle(request);
  }
}

Вот мой код для отправки запроса:

  httpQuery(ressource): Observable<T[]> {
    var absoluteUrl = this.getAbsoluteUrl(ressource);
    console.log("Sending");
    return this.httpClient
      .get<T[]>(absoluteUrl);
  }

Однако я сталкиваюсь со следующей проблемой: Перехватчик срабатывает, но ПОСЛЕ запроса отправляется.Я вижу это в консоли разработчика, где log-сообщение от http-метода приходит прямо перед log-сообщением от перехватчика:

Как видите, это приводитна ответ 401 от сервера, который ожидает заголовок авторизации.

Я прочитал тонну учебных пособий и вопросов stackoverflow о перехватчике, но не вижу своей ошибки.

Возможно, некоторыеиз парней есть подсказка для меня?

Спасибо и наилучшие пожелания, Алекс

Answer 1

Пожалуйста, попробуйте вот так

const headers = request.headers.append('Authorization', `Bearer ${sessionId}`);
const d = request.clone({ headers: headers });

return next.handle(request);

Answer 2

То, что вы показываете, просто отлично

console.log("Sending"); //here you print to the cosole
return this.httpClient // here you actually MAKE http call.
  .get<T[]>(absoluteUrl);

Таким образом, ваш перехватчик называется во время выполнения запроса, и перед выполнением фактического запроса XHR.