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

Метод 1: использование перехватчиков
Один из наиболее распространенных подходов в Angular — использование перехватчиков HTTP. Перехватчики позволяют изменять исходящие HTTP-запросы перед их отправкой. Вы можете перехватить запрос, добавить токен в заголовок и продолжить выполнение запроса. Вот пример того, как этого можно добиться:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = 'YOUR_TOKEN_HERE';
    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`
      }
    });
    return next.handle(request);
  }
}

Метод 2: использование HttpClient RequestOptions
Другой подход — установить токен в параметрах запроса при выполнении HTTP-вызова с использованием HttpClient. Вот пример:

import { HttpClient, HttpHeaders } from '@angular/common/http';
const token = 'YOUR_TOKEN_HERE';
const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
this.http.get('https://api.example.com/data', { headers }).subscribe(response => {
  // Handle the response
});

Метод 3: использование перехватчиков Angular HTTPClient
Angular HTTPClient также предоставляет перехватчики, которые позволяют изменять заголовки запросов. Вот пример:

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = 'YOUR_TOKEN_HERE';
    const authReq = request.clone({
      setHeaders: { Authorization: `Bearer ${token}` }
    });
    return next.handle(authReq);
  }
}

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

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