Угловая библиотека: отдельный HttpInterceptor - PullRequest
Новая
       70

Угловая библиотека: отдельный HttpInterceptor

0 голосов
/ 27 сентября 2019

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

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

Идея

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

Проблема

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

AppModule

  • import:
    • HttpClientModule (1)
    • CustomLibraryModule
  • провайдеры:
    • HTTP_INTERCEPTORS (1)

CustomLibraryModule

  • импорт:
    • HttpClientModule (2)
  • провайдеров:
    • HTTP_INTERCEPTORS (2)

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

Вопрос

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

Ответы [ 2 ]

1 голос
/ 27 сентября 2019

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

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

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

0 голосов
/ 30 сентября 2019

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

@Injectable({ providedIn: 'root' })

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

@Injectable()

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

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

...