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

Я работаю над приложением angular 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);
  }

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

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

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

Может быть, кто-нибудь из парней подскажет мне?

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


angular interceptor angular-http-interceptors
person Alex    schedule 20.11.2018    source источник
comment
Пожалуйста, проверьте вкладку вашей сети, чтобы узнать, добавлен ли заголовок авторизации или нет.   -  person Sheik Althaf    schedule 20.11.2018
comment
Я сделал и не отправил (в разных браузерах). Интересное примечание: скрипач вообще не замечает этот конкретный запрос. Каждый запрос, который я делаю, фиксируется скрипачом, но этот запрос, который приводит к ответу 401, нет. Только Wireshark фиксирует этот запрос и ответ. И в Wireshark тоже нет заголовка авторизации.   -  person Alex    schedule 20.11.2018
comment
У меня такая же проблема, как вы это поняли?   -  person aycanadal    schedule 06.08.2019
comment
Да, какое-то время работает. Дело в том, что я понятия не имею, что я изменил, чтобы заставить его работать. Фактический код очень похож на то, что я опубликовал. Вот несколько советов: убедитесь, что нет асинхронной задачи для получения токена или чего-то еще, которая завершается, когда запрос уже отправлен. Второй подход, поиграйте с клонированием объекта запроса. В более новых версиях angular коллекция заголовков неизменна, что сложно обработать. зарегистрируйте объект запроса в консоли, чтобы убедиться, что заголовок установлен.   -  person Alex    schedule 07.08.2019

Ответы (3)


arrow_upward
0
arrow_downward

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

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

Таким образом, ваш перехватчик вызывается ВО ВРЕМЯ выполнения запроса и ДО выполнения фактического запроса XHR.

person Antoniossss    schedule 20.11.2018
comment
Спасибо за повтор. Как вы можете видеть на скриншоте, ошибка (которая возникает из-за ответа сервера 401) также перехватывается ДО запуска перехватчика. А также, кроме журнала, заголовок авторизации не отправляется вместе с запросом ... - person Alex; 20.11.2018
comment
Нет, именно так работает консоль браузера. Порядок распечатки не гарантируется и может быть отложен в случае объектов (исключение здесь). Раньше я сталкивался с подобной проблемой wtf. - person Antoniossss; 20.11.2018
comment
Это может быть правдой, но, как я уже сказал, кроме журнала это не работает - person Alex; 20.11.2018
comment
И это другая часть истории. Вы можете увидеть в брокере, какой запрос действительно сделан, и вы увидите, что, вероятно, есть предъявитель. - person Antoniossss; 20.11.2018
comment
Я проверил фактический запрос на вкладке сети в разных браузерах, а также в wirehark, и могу сказать, что нет заголовка авторизации - person Alex; 20.11.2018
comment
Возможно, идентификатора сеанса нет, поскольку это обязательное условие в вашем коде. Не нужно использовать wirehark, достаточно веб-консоли. - person Antoniossss; 20.11.2018

arrow_upward
0
arrow_downward

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

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

return next.handle(request);
person Sheik Althaf    schedule 20.11.2018
comment
Спасибо за ответ. Я пробовал это, но это не работает - person Alex; 20.11.2018

arrow_upward
0
arrow_downward

Я была такая же проблема.

Перехватчик был добавлен в провайдеры CoreModule. Когда я добавил его к поставщикам FeatureModule, которые выполняли вызов, он работал, как ожидалось.

Это, конечно, не очень удобно, но на данный момент у меня работает, потому что у меня только один FeatureModule :)

person Laoujin    schedule 16.01.2020