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

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

// Create an interceptor
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>> {
    // Retrieve the token from wherever it is stored (e.g., local storage, cookies)
    const token = retrieveToken();
    // Clone the request and append the token to the headers
    const modifiedRequest = request.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`
      }
    });
    // Pass the modified request to the next handler
    return next.handle(modifiedRequest);
  }
}
// Register the interceptor
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
@NgModule({
  imports: [HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

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

import { HttpClient, HttpHeaders } from '@angular/common/http';
// Retrieve the token from wherever it is stored
const token = retrieveToken();
// Create the headers object and append the token
const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
// Make the HTTP request with the headers
this.http.get<any>('https://api.example.com/data', { headers })
  .subscribe(response => {
    // Handle the response
  });

Метод 3. Использование службы аутентификации.
Другой подход — создать службу аутентификации, которая будет управлять токенами и при необходимости добавлять их к запросам.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class AuthService {
  private token: string;
  constructor(private http: HttpClient) {
    // Initialize the token from wherever it is stored
    this.token = retrieveToken();
  }
  private getHeaders(): HttpHeaders {
    return new HttpHeaders().set('Authorization', `Bearer ${this.token}`);
  }
  public getData(): Observable<any> {
    const headers = this.getHeaders();
    return this.http.get<any>('https://api.example.com/data', { headers });
  }
}

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

Следуя этим рекомендациям, вы сможете повысить безопасность своих приложений Angular и защитить конфиденциальные данные. Активно внедряйте новейшие меры безопасности для защиты информации ваших пользователей.