JWT токены

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

Структура JWT

JWT состоит из трёх частей, разделённых точками:

  1. Header (Заголовок) — указывает алгоритм подписи и тип токена:
{
  "alg": "HS256",
  "typ": "JWT"
}
  1. Payload (Полезная нагрузка) — содержит данные о пользователе и дополнительные сведения:
{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}
  1. Signature (Подпись) — криптографическая подпись, проверяющая подлинность токена:
HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret
)

Хранение и использование JWT в Angular

1. Хранение токена Наиболее распространённые способы: localStorage и sessionStorage. localStorage сохраняет токен между сессиями, sessionStorage удаляет его при закрытии браузера. Пример сохранения:

localStorage.setItem('token', jwtToken);

2. Отправка токена с запросами Для доступа к защищённым API необходимо прикреплять токен в заголовке Authorization:

const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
this.http.get('/api/protected', { headers }).subscribe(...);

3. Интерсепторы для автоматизации Angular позволяет использовать HTTP-интерсепторы, чтобы автоматически добавлять JWT ко всем запросам:

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('token');
    if (token) {
      req = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
    }
    return next.handle(req);
  }
}

Проверка и обновление токена

  • Проверка срока действия: JWT содержит поле exp, которое позволяет определить время истечения.
  • Обновление токена (refresh token): Для продления сессии используется отдельный refresh-токен, который отправляется на сервер для получения нового JWT без повторной аутентификации пользователя.

Безопасность JWT

  • Хранить токен в localStorage удобно, но рискованно с точки зрения XSS. Рекомендуется рассматривать альтернативы, такие как HttpOnly cookies.
  • Никогда не хранить в JWT чувствительные данные, которые не должны быть доступны клиенту.
  • Использовать HTTPS для всех запросов с токенами, чтобы исключить возможность перехвата.

Использование JWT в Angular позволяет эффективно управлять авторизацией, интегрируя клиентскую логику с серверными механизмами безопасности и обеспечивая плавный пользовательский опыт при работе с защищёнными ресурсами.

Оглавление