При работе с приложениями Angular обычно взаимодействие с API осуществляется с помощью модуля HttpClient. В некоторых случаях вам может потребоваться добавить собственные заголовки к вашим HTTP-запросам. В этой статье блога будут рассмотрены различные методы добавления заголовков в HttpClient в Angular, а также приведены примеры кода.

Метод 1: добавление заголовков к отдельным запросам
Самый простой способ добавить заголовки к конкретному запросу HttpClient — передать объект параметров методу запроса. Объект параметров позволяет настраивать различные аспекты запроса, включая заголовки. Вот пример:

import { HttpClient, HttpHeaders } from '@angular/common/http';
// ...
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token_here'
  })
};
this.http.get('/api/data', httpOptions).subscribe((data) => {
  // Handle the response
});

Метод 2: использование HTTP-перехватчиков Angular
Angular предоставляет HTTP-перехватчики, которые позволяют глобально изменять исходящие HTTP-запросы. Это означает, что вы можете добавлять заголовки ко всем запросам, не указывая их явно для каждого вызова. Вот как можно создать перехватчик для добавления заголовков:

Шаг 1. Создайте класс-перехватчик:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpHeaders } from '@angular/common/http';
@Injectable()
export class HeaderInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const modifiedReq = req.clone({
      headers: req.headers.append('Authorization', 'Bearer your_token_here')
    });
    return next.handle(modifiedReq);
  }
}

Шаг 2. Укажите перехватчик в вашем app.module.ts:

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HeaderInterceptor } from './header.interceptor';
@NgModule({
  imports: [
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HeaderInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

При такой настройке HeaderInterceptorбудет автоматически добавлять указанные заголовки ко всем исходящим HTTP-запросам.

Метод 3. Использование общей службы.
Другой подход заключается в создании общей службы, ответственной за выполнение HTTP-запросов. Вы можете определить в службе метод, который добавляет необходимые заголовки перед выполнением запроса. Вот пример:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable()
export class ApiService {
  constructor(private http: HttpClient) { }
  getData() {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your_token_here'
      })
    };
    return this.http.get('/api/data', httpOptions);
  }
}

В этом методе вы инкапсулируете логику добавления заголовков в ApiService, что позволяет повторно использовать ее в вашем приложении.

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

Не забывайте безопасно обрабатывать значения заголовков и безопасно хранить конфиденциальную информацию, например токены.