Библиотека Angular: отдельный HttpInterceptor

Чего я хочу достичь

Инкапсулированное приложение (редактор форм), которое я могу использовать в другом угловом приложении, а также в любом веб-приложении.

Идея

Основные модули / компоненты могут быть реализованы как библиотека angular (основной компонент как shadow dom), поэтому я могу добавить оболочку angular elements для создания веб-компонента, но также могу импортировать саму библиотеку как пакет npm внутри моего существующего приложения angular . Таким образом, мое приложение angular загружает не весь пакет javascript, а только те модули, которые не предоставляются, кроме другого приложения, для повышения производительности и интеграции.

Проблема

Для каждого запроса из библиотеки я хочу, чтобы http-перехватчик входил в систему / добавлял токен jwt в заголовок запроса. Когда я создаю приложение с оболочкой angular elements (ничего не делаю, кроме импорта библиотеки и создания веб-компонента), все работает нормально. Когда я добавляю его в приложение angular, перехватчик не работает должным образом, потому что другое приложение также имеет перехватчик. Я хочу инкапсулировать перехватчик библиотек только в библиотеку. Итак, я подумал, что мне просто нужно снова импортировать HttpClientModule внутри моей библиотеки и получить свой собственный экземпляр, поэтому определенный поставщик HTTP_INTERCEPTORS внутри того же файла знает, когда срабатывать. К сожалению, эта идея не работает, и оба мешают.

AppModule

  • imports:
    • HttpClientModule(1)
    • CustomLibraryModule
  • providers:
    • HTTP_INTERCEPTORS(1)

CustomLibraryModule

  • imports:
    • HttpClientModule(2)
  • providers:
    • HTTP_INTERCEPTORS(2)

В лучшем случае я хочу импортировать CustomLibraryModule в ленивый дочерний модуль моего приложения.

Вопрос

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


angular angular-library angular-elements angular-http-interceptors
person NePheus    schedule 27.09.2019    source источник
comment
вы не можете инкапсулировать перехватчик без ленивой загрузки. Это странная идея, поскольку я не знаю, в каком варианте использования можно найти библиотеку, полезную для всех приложений, которая добавляет JWT к моим запросам, но вам нужно обернуть службу http, если вы хотите это сделать.   -  person bryan60    schedule 27.09.2019
comment
@ bryan60 Я думаю, вы можете инкапсулировать это. Но я согласен с вами по второму пункту: зачем вам делать HTTP-запросы для библиотеки форм? Если я увижу это в вашем исходном коде, я не захочу его использовать ...   -  person    schedule 27.09.2019
comment
@Maryannah проверьте примечания по использованию перехватчиков: https://angular.io/api/common/http/HttpInterceptor Единственный способ получить инкапсулированный перехватчик - это модуль с ленивой загрузкой ... и это не предполагаемый / поддерживаемый вариант использования, а скорее непреднамеренный побочный эффект ленивой загрузки, который может сломаться в будущих выпусках. В противном случае новый импорт HttpClientModule перезапишет предыдущие.   -  person bryan60    schedule 27.09.2019
comment
@ bryan60 да ладно, я такого никогда не видел. Спасибо за информацию !   -  person    schedule 27.09.2019
comment
Пример использования: этот редактор формы связан с серверной частью. Вы можете добавить элемент в форму, а также отредактировать существующий. Каждое поле сохраняется на размытие. Также загружаются некоторые данные темы из-за того, что они предназначены для нескольких клиентов. Этот редактор форм должен быть интегрирован как часть панели управления, но также должен быть автономным как веб-компонент, чтобы запускать его независимо в каждой системе.   -  person NePheus    schedule 27.09.2019

Ответы (2)


arrow_upward
1
arrow_downward

Прямо сейчас вы смешиваете проблемы, говоря, что этот независимый редактор форм знает, что ваш сервер требует JWT. Веб-компонент не должен знать о вашей внутренней реализации.

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

Кроме того, если вы используете это в приложении, отличном от Angular, вам все равно потребуется, чтобы Angular был на странице (см. https://angular.io/guide/elements

person observingstream    schedule 27.09.2019

arrow_upward
1
arrow_downward

После некоторого исследования я нашел причину, по которой CustomLibraryModule использовал не свой собственный перехватчик, а перехватчик основного приложения. Библиотека использует классы API, которые генерируются nswag (серверная часть .NET). К сожалению, сгенерированные инъекционные классы были настроены как одноэлементные, поэтому каждый класс был украшен

@Injectable({ providedIn: 'root' })

Я изменил этот конфиг и теперь они украшены просто

@Injectable()

Кроме того, я добавил классы API в раздел «поставщики» своего модуля. Теперь его конструкторы вызываются со ссылкой HttpClient ленивого загруженного модуля и вызывается правильный перехватчик.

Из-за непонимания я медленно перешел к этой части моего кода. Так что, в конце концов, это была моя собственная вина, но я благодарен за вашу помощь и разъяснения.

person NePheus    schedule 30.09.2019
comment
Это здорово, было бы здорово посмотреть, как вы это сделали. Как ваш исходный код для вашего перехватчика и где он был введен. - person imnickvaughn; 31.03.2020