Зачем нужны Interceptors в Angular и как они работают
HTTP Interceptors в Angular — это мощный инструмент для перехвата и модификации HTTP-запросов и ответов на уровне глобального сервиса. Это особенно полезно, когда нужно централизованно добавить заголовки, обработать ошибки или логировать сетевые запросы. Интерцепторы работают как middleware, последовательно обрабатывая каждый HTTP-запрос и ответ внутри цепочки.
Если ты работаешь с Angular и хочешь внедрить авторизацию через токены, логгирование или глобальную обработку ошибок — настройка interceptors в Angular будет лучшим решением. Это позволяет не загружать компоненты лишней логикой и соблюдать принцип единой ответственности.
Создание базового Interceptor’а: пошаговая инструкция
Для начала тебе нужно реализовать интерфейс `HttpInterceptor`, который определяет метод `intercept`. Этот метод принимает два параметра: `HttpRequest` и `HttpHandler`. Вот как выглядит минимальный пример:
```typescript
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
const cloned = req.clone({
setHeaders: {
Authorization: `Bearer YOUR_TOKEN_HERE`
}
});
return next.handle(cloned);
}
}
```
Этот код показывает базовую реализацию добавления заголовка авторизации. Подобные Angular interceptors примеры — отличный старт для новичков.
Регистрация Interceptor в модуле
После создания interceptor’а, нужно зарегистрировать его в провайдерах:
```typescript
import { HTTP_INTERCEPTORS } from '@angular/common/http';
@NgModule({
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
}
]
})
export class AppModule {}
```
Важно: передача `multi: true` обязательна — она указывает Angular использовать цепочку интерцепторов, а не заменять предыдущие.
Практическое применение: что можно делать с Interceptors
В реальных проектах Interceptors применяются для выполнения ряда задач. Вот что часто делают разработчики:
- Добавляют токен авторизации из хранилища (например, из `localStorage`)
- Обрабатывают ошибки 401/403 и направляют пользователя на страницу логина
- Логируют все входящие и исходящие HTTP-запросы
- Добавляют заголовки Content-Type или Accept
- Показывают глобальный индикатор загрузки
Эксперты рекомендуют разделять логику и создавать разные Angular interceptors для разных задач. Например, один отвечает за авторизацию, другой — за логирование, третий — за обработку ошибок. Такой подход улучшает читаемость и поддержку кода.
Реализация нескольких Interceptors
Если у тебя несколько Interceptors, Angular будет вызывать их в порядке регистрации. Важно понимать, что:
- Запросы проходят через Interceptors сверху вниз
- Ответы — в обратном порядке (снизу вверх)
Пример правильной регистрации:
```typescript
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorHandlerInterceptor, multi: true }
]
```
Таким образом, сначала добавится токен, затем логируется запрос, и в конце будет обработка возможных ошибок.
Обработка ошибок: делаем API стабильнее
Обработка ошибок — один из наиболее частых кейсов применения Interceptors. Ниже пример того, как можно отловить ошибку 401 и автоматически перенаправить пользователя:
```typescript
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Router } from '@angular/router';
@Injectable()
export class ErrorHandlerInterceptor implements HttpInterceptor {
constructor(private router: Router) {}
intercept(req: HttpRequest
return next.handle(req).pipe(
catchError((error: HttpErrorResponse) => {
if (error.status === 401 || error.status === 403) {
this.router.navigate(['/login']);
}
return throwError(() => error);
})
);
}
}
```
Такой подход позволяет централизованно реагировать на ошибки API. Это особенно актуально в SPA, где важна плавность навигации и отсутствие ненужной перезагрузки страницы.
Лучшие практики от экспертов
В работе с Interceptors важно не только понимать, как их создать, но и следовать ряду проверенных рекомендаций:
- Минимизируй логику внутри Interceptor’а. Чем проще — тем лучше. Вынеси бизнес-логику в отдельные сервисы.
- Избегай циклических зависимостей. Если тебе нужно использовать сервис внутри Interceptor’а, убедись, что он не зависит от `HttpClient`, иначе возникнет рекурсия.
- Не забывай об отписке. Хотя Interceptors работают на потоке Observable, важно использовать `pipe()` и `catchError()` для корректной обработки.
- Используй Dependency Injection. Это позволит удобно тестировать и переиспользовать Interceptors.
- Проверяй наличие токена. Перед установкой заголовка авторизации убедись, что токен вообще есть.
Angular interceptors для начинающих: частые ошибки
Многие новички сталкиваются с тем, что Interceptor "не работает". Вот основные причины:
- Не зарегистрирован в `AppModule`
- Отсутствует `multi: true`
- Ошибка в `clone()` вызове (например, опечатка в заголовке)
- Несовместимость с сервером из-за неправильного заголовка
- Ошибки не ловятся, потому что не используется `catchError`
Если ты только начинаешь, следуй официальному HTTP interceptors Angular руководству, а также анализируй рабочие Angular interceptors примеры из открытых репозиториев.
Итоги: почему Interceptors — must-have в любом Angular проекте
Настройка interceptors в Angular — обязательный этап, если ты хочешь управлять HTTP на уровне всей системы. Они избавляют от дублирования, упрощают тестирование и делают твой код более чистым. Главное — грамотно структурировать Interceptors, не перегружать их логикой и соблюдать принципы SOLID.
С их помощью можно централизованно работать с авторизацией, логированием и ошибками, что особенно полезно в больших SPA-приложениях. Если ты хочешь освоить Angular interceptors для начинающих, начни с простого примера и постепенно расширяй его, добавляя новые слои обработки.
