Angular предоставляет HttpInterceptor для перехвата всех сетевых запросов, сделанных службой Http или HttpClient, чтобы вы могли добавлять заголовки, такие как токены Authorization или AppId. Но он не перехватывает запросы XmlHttpRequest (XHR), сделанные явно. В этой истории мы увидим, как перехватывать запросы XHR в Angular.
Угловой HttpInterceptor:
Когда вам нужно передать определенные заголовки или изменить ответ API-интерфейсов REST, используемых в приложении Angular, HttpInterceptor предоставьте решение, которое можно сделать централизованно. Например, заголовок Authorization, в котором вы можете передать токен аутентификацииBearer <auth-token>, прочитав его из локального состояния или службы. Или добавьте AppId или ApiKeyheaders, где вы указываете эти значения для использования защищенных API.
Вот простой пример HttpInterceptor, в котором мы передаем значение DUMMY_AUTH_TOKEN в токене Authorization.
Вы можете видеть, что заголовок Authorization добавляется к исходящему запросу.
Angular Interceptor делает больше, чем просто передает заголовки. Ознакомьтесь с официальной документацией, чтобы узнать, как регистрировать запросы/ответы, кэшировать запросы.
XMLHttpRequest, исходящий от сторонних компонентов
Если вы используете REST API через службы Http (устаревшие) или HttpClient и правильно настроили HttpInterceptor в одном поставщике AppModule, вам не нужно беспокоиться об этой ситуации. Все запросы должны быть перехвачены HttpInterceptor.
Однако вы можете столкнуться с ситуацией, когда вы используете стороннюю библиотеку компонентов, которая внутренне запускает XMLHttpRequests для настроенных API REST. Например, вы можете использовать сторонний компонент проводника для просмотра списка файлов из ваших служб API, хранилища BLOB-объектов Azure или AWS S3…
