Http Interceptor¶

Angular HTTP Interceptor позволяет перехватывать HTTP-запросы перед их отправкой и вносить в них необходимые изменения. То же самое справедливо и для ответов сервера.

Наиболее частое их применение — отправка авторизационных данных, логирование и обработка серверных ошибок.

Начнем сразу с примера и детально его рассмотрим.

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor() {}

    intercept(
        req: HttpRequest<any>,
        next: HttpHandler
    ): Observable<HttpEvent<any>> {
        const authReq = req.clone({
            headers: req.headers.set(
                'Session',
                '123456789'
            ),
        });

        return next.handle(authReq).pipe(
            tap(
                (event) => {
                    if (event instanceof HttpResponse)
                        console.log('Server response');
                },
                (err) => {
                    if (err instanceof HttpErrorResponse) {
                        if (err.status == 401)
                            console.log('Unauthorized');
                    }
                }
            )
        );
    }
}

Создание сервиса начинается с внедрения интерфейса Angular HttpIntrceptor из @angular/common/http и реализации его метода intercept().

intercept() модифицирует исходный запрос и возвращает объект Observable события HttpEvent<any>, который в свою очередь возвращает метод next() объекта типа HttpRequest.

В качестве аргумента next() принимает модифицированный объект запроса.

Для манипуляций с объектом запроса используется метод clone(), вызываемый у экземпляра класса HttpRequest. Он позволяет изменять свойства объекта, пока создает его копию, и возвращает его модифицированный экземпляр.

Ответы сервера также попадают в метод intercept(). Чтобы "перехватить" их, нужно определить тип события (any в HttpEvent<any>).

Сделать это можно используя оператор tap(), который принимает в качестве аргумента возвращаемое значение Observable. Все успешные ответы сервера принадлежат к классу HttpResponse, ошибки — к классу HttpErrorResponse.

В зависимости от ответа сервера объект события содержит соответствующие событию данные.

В приложение Angular HTTP Interceptor внедряется аналогично сервису.

providers: [
    AuthService,
    AuthGuard,
    {
        provide: HTTP_INTERCEPTORS,
        useClass: AuthInterceptor,
        multi: true,
    },
];

Сперва необходимо импортировать injection-токен HTTP_INTERCEPTORS, затем в массиве providers записать объект, подобный тому, что записан в примере выше.

Обязательный параметр {multi: true} говорит, что injection-токен HTTP_INTERCEPTORS внедряет не одно, а массив значений. Такой механизм позволяет создавать в приложении Angular неограниченное количество HTTP Interceptor-ов.

Http Interceptor¶

Комментарии