В приложениях Angular интеграция аутентификации JWT (JSON Web Token) в HTTP-запросы является общим требованием. Токены JWT используются для безопасной связи между клиентом и сервером, гарантируя, что только авторизованные пользователи смогут получить доступ к защищенным ресурсам. В этой статье блога мы рассмотрим различные методы добавления токенов JWT в HTTP-запросы Angular, дополненные примерами кода и разговорными объяснениями.

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

1. Создайте файл auth-interceptor.ts:

   import { Injectable } from '@angular/core';
   import { HttpRequest, HttpHandler, HttpInterceptor } from '@angular/common/http';
   @Injectable()
   export class AuthInterceptor implements HttpInterceptor {
   constructor() {}
   intercept(request: HttpRequest<any>, next: HttpHandler) {
   const token = 'your_jwt_token_here'; // Replace with your actual token retrieval logic
   if (token) {
     request = request.clone({
       setHeaders: {
         Authorization: `Bearer ${token}`
       }
     });
   }
   return next.handle(request);
   }
   }

2. Зарегистрируйте перехватчик в файле app.module.ts:

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

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

1. Создайте файл auth.service.ts:

   import { Injectable } from '@angular/core';
   import { HttpClient, HttpHeaders } from '@angular/common/http';
   @Injectable()
   export class AuthService {
   private token: string;
   constructor(private http: HttpClient) {}
   setToken(token: string) {
   this.token = token;
   }
   addTokenToHeaders(headers: HttpHeaders): HttpHeaders {
   if (this.token) {
     return headers.set('Authorization', `Bearer ${this.token}`);
   }
   return headers;
   }
   get(url: string) {
   const headers = this.addTokenToHeaders(new HttpHeaders());
   return this.http.get(url, { headers });
   }
   post(url: string, data: any) {
   const headers = this.addTokenToHeaders(new HttpHeaders());
   return this.http.post(url, data, { headers });
   }
   // Add more methods as needed for different HTTP request types
   }

2. Используйте AuthService в своих компонентах:

   import { Component } from '@angular/core';
   import { AuthService } from './auth.service';
   @Component({
   // ...
   })
   export class MyComponent {
   constructor(private authService: AuthService) {}
   getData() {
   const url = 'https://api.example.com/data';
   this.authService.get(url).subscribe(data => {
     // Handle the response
   });
   }
   // ...
   }

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

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

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