Перехватчики в Angular (аутентификация, кэширование, логирование, обработка ошибок)

Перехватчики Angular — это особый вид клиентской службы HTTP, единственной целью которой является перехват каждого выполненного HTTP-запроса. Это справедливо как для входящих, так и для исходящих HTTP-запросов. Хорошо, я видел это краткое определение в нескольких местах, но что это означает? Как это работает?

Когда ответ приходит с обратной стороны, перехватчики могут преобразовать его перед передачей нашему приложению.

Одним из основных преимуществ Http Interceptors является добавление заголовка авторизации к каждому запросу. Мы могли бы делать это вручную, но это требует много работы и чревато ошибками. Еще одно преимущество — перехват ошибок, возникающих при выполнении запроса, и их регистрация.

Создание HTTP-перехватчика

Мы создаем инжектируемый сервис, который реализует интерфейс HttpInterceptor и, следовательно, должен реализовать метод Intercept


@Injectable() export class DemoHttpInterceptor implements HttpInterceptor {
 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    //do whatever you want with the HttpRequest
    return next.handle(req);
}

Вход в полноэкранный режим Выйти из полноэкранного режима

Затем добавляем класс в корневой модуль

providers: [
    {
        provide: HTTP_INTERCEPTORS,
        useClass: DemoHttpInterceptor,
        multi: true
    }
],

Вход в полноэкранный режим Выйти из полноэкранного режима

Базовый пример авторизации с использованием Http Interceptor

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { AuthState } from '../../store/auth.state';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(this.addAuthToken(request));
  }

  addAuthToken(request: HttpRequest<any>) {
    const token = this.authService.getAuthToken();

    return request.clone({
        setHeaders: {
          Authorization: `Basic ${token}`
        }
    })
  }
}

Войти в полноэкранный режим Выход из полноэкранного режима