Как использовать перехватчик для всего приложения?

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

Шаги для создания перехватчика

1. Создайте класс перехватчика: Класс должен реализовывать интерфейс HttpInterceptor.
2. Разместите перехватчик в модуле: Добавьте его в массив провайдеров вашего модуля.

Пример реализации перехватчика

Давайте рассмотрим пример создания простого перехватчика, который добавляет заголовок 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 { }

Пояснение к коду

1. Interceptor: В классе AuthInterceptor мы реализуем метод intercept, который принимает HttpRequest и HttpHandler. В этом методе мы создаем новый экземпляр запроса с добавленным заголовком Authorization.
2. getToken: Этот метод отвечает за получение токена аутентификации, который затем добавляется к запросу.
3. Модуль: В NgModule мы импортируем HttpClientModule для работы с HTTP и добавляем наш перехватчик к провайдерам. Параметр multi: true позволяет регистрировать несколько перехватчиков.

Заключение

Использование перехватчиков в Angular — это простой и эффективный способ централизованной обработки HTTP-запросов и ответов в приложении. Вы можете добавлять логику для авторизации, обработки ошибок и других сценариев в одном месте, что делает код более чистым и поддерживаемым.