Как использовать перехватчик для всего приложения?
Перехватчики в Angular — это мощный инструмент для обработки HTTP-запросов и ответов. Они позволяют вам модифицировать запросы перед их отправкой на сервер или обрабатывать ответы, когда они приходят. Это особенно полезно для добавления заголовков авторизации, обработки ошибок и логирования.
Шаги для создания перехватчика
HttpInterceptor.Пример реализации перехватчика
Давайте рассмотрим пример создания простого перехватчика, который добавляет заголовок Authorization ко всем исходящим HTTP-запросам.
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// Копируем запрос и добавляем заголовок Authorization
const clonedRequest = req.clone({
setHeaders: {
Authorization: `Bearer ${this.getToken()}`
}
});
// Возвращаем обработанный запрос
return next.handle(clonedRequest);
}
private getToken(): string {
// Логика для получения токена (например, из localStorage)
return localStorage.getItem('authToken') || '';
}
}
Регистрация перехватчика в модуле
Теперь нужно зарегистрировать перехватчик в вашем основном модуле (app.module.ts).
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AuthInterceptor } from './auth.interceptor'; // путь к вашему перехватчику
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true // позволяет добавлять несколько перехватчиков
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
Пояснение к коду
AuthInterceptor мы реализуем метод intercept, который принимает HttpRequest и HttpHandler. В этом методе мы создаем новый экземпляр запроса с добавленным заголовком Authorization.NgModule мы импортируем HttpClientModule для работы с HTTP и добавляем наш перехватчик к провайдерам. Параметр multi: true позволяет регистрировать несколько перехватчиков.Заключение
Использование перехватчиков в Angular — это простой и эффективный способ централизованной обработки HTTP-запросов и ответов в приложении. Вы можете добавлять логику для авторизации, обработки ошибок и других сценариев в одном месте, что делает код более чистым и поддерживаемым.