Каковы применения HTTP-перехватчиков?
HTTP-перехватчики (HTTP Interceptors) в Angular — это мощный инструмент, который позволяет вам перехватывать и изменять HTTP-запросы и ответы перед их отправкой или получением. Они особенно полезны для реализации функциональности, связанной с аутентификацией, обработкой ошибок и логированием. Давайте рассмотрим основные применения HTTP-перехватчиков.
1. Аутентификация
Одно из самых распространенных применений HTTP-перехватчиков — это добавление токена аутентификации (например, JWT) в заголовок каждого запроса. Это позволяет вам не заботиться о добавлении токена в каждом сервисе.
Пример:
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>> {
const token = localStorage.getItem('token'); // получаем токен из local storage
if (token) {
const cloned = req.clone({
setHeaders: {Authorization: `Bearer ${token}`}
});
return next.handle(cloned); // отправляем измененный запрос
}
return next.handle(req); // отправляем оригинальный запрос, если токена нет
}
}
2. Обработка ошибок
Вы можете перехватывать ответы HTTP для обработки ошибок на одном уровне, избавляя от необходимости дублировать код в каждом сервисе.
Пример:
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';
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req).pipe(
catchError((error: HttpErrorResponse) => {
// Логика обработки ошибок
console.error('HTTP Error:', error);
return throwError(error);
})
);
}
}
3. Логирование запросов
HTTP-перехватчики могут также использоваться для логирования всех исходящих запросов и входящих ответов, что полезно для отладки.
Пример:
import {Injectable} from '@angular/core';
import {HttpInterceptor, HttpRequest, HttpHandler, HttpEvent} from '@angular/common/http';
import {Observable} from 'rxjs';
@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log('Request:', req);
return next.handle(req).do(event => {
console.log('Response:', event);
});
}
}
4. Модификация запросов и ответов
Можно изменять запросы или ответы, например, добавлять определенные параметры или изменять формат данных.
Регистрация HTTP-перехватчиков
Чтобы использовать перехватчики, их необходимо зарегистрировать в модуле приложения. Вы можете сделать это в файле
app.module.ts:
import {HTTP_INTERCEPTORS} from '@angular/common/http';
import {AuthInterceptor} from './auth.interceptor';
import {ErrorInterceptor} from './error.interceptor';
import {LoggingInterceptor} from './logging.interceptor';
@NgModule({
providers: [
{provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true},
{provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true},
{provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true},
],
})
export class AppModule {
}
Заключение
HTTP-перехватчики в Angular — это мощный инструмент для централизованного управления HTTP-запросами и ответами. Они помогают поддерживать чистоту и структуру кода, освобождая вас от необходимости повторять одинаковую логику в каждом сервисе. Используя перехватчики, вы можете сосредоточиться на бизнес-логике вашего приложения, оставляя обработку запросов и ошибок на откуп Angular.