frontend-api-client-with-jwt
Создание API-клиентов с обработкой JWT в Next.js
Управление JWT-аутентификацией в API-клиентах является сложной задачей, подверженной ошибкам. Этот навык предоставляет фреймворк для реализации безопасного, централизованного API-коммуникации с автоматическим обновлением токенов, обработкой ошибок и согласованным разбором ответов в приложениях Next.js.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Ресурсы для AI-агентов
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Протестировать
Использование «frontend-api-client-with-jwt». Create an API client that handles JWT authentication
Ожидаемый результат:
- Централизованная конфигурация API-клиента с базовым URL и настройками таймаута
- Прикрепление заголовка авторизации в формате Bearer token
- Механизм обновления токена, срабатывающий при ответах 401
- Обработка ошибок аутентификации с обратной связью пользователю
- Перехватчик запросов для логирования и внедрения заголовков
Использование «frontend-api-client-with-jwt». How do I handle token expiration in my Next.js app
Ожидаемый результат:
- Валидировать срок действия токена перед выполнением запросов
- Проактивно обновлять токены до истечения их срока действия
- Обрабатывать сбои обновления путём перенаправления на страницу входа
- Безопасно хранить обновлённые токены после обновления
- Координировать обновление между несколькими одновременными запросами
Использование «frontend-api-client-with-jwt». What security considerations exist for JWT in frontend
Ожидаемый результат:
- Использовать HTTPS для всей API-коммуникации
- Безопасно хранить токены для предотвращения XSS-атак
- Реализовать корректную обработку CORS
- Избегать раскрытия конфиденциальных данных в сообщениях об ошибках
- Валидировать ответы перед обработкой
Аудит безопасности
Средний рискThe static findings are documentation terms in SKILL.md, not executable code, command execution, scanning, or exfiltration behavior. One semantic concern remains: the skill lists localStorage as a JWT storage option without enough warning about XSS exposure, so publication should include a security warning.
Confirmed security concerns (3)
Оценка качества
Что вы можете построить
Архитектура API-клиента для Next.js
Спроектируйте централизованный API-клиент для приложений Next.js с безопасной обработкой JWT-токенов и автоматическим обновлением.
Интеграция потока аутентификации
Реализуйте бесшовные потоки аутентификации с обновлением токенов в клиентских и серверных компонентах.
Паттерны API-хук React
Создайте пользовательские хуки для API-коммуникации, которые обрабатывают JWT-токены и ошибки согласованно.
Попробуйте эти промпты
Создайте API-клиент в Next.js, который автоматически прикрепляет JWT-токены к запросам и обрабатывает обновление токена при ошибках 401.
Реализуйте автоматическое обновление токена в приложении Next.js до истечения срока действия JWT для предотвращения сбоев запросов.
Создайте разбор ответов об ошибках для API-клиента, который определяет ошибки 401 и 403 и перенаправляет пользователей соответствующим образом.
Создайте перехватчики запросов для API-клиента Next.js, которые добавляют заголовки авторизации и логируют исходящие запросы.
Лучшие практики
- Храните JWT-токены безопасно и проверяйте их перед выполнением API-запросов для предотвращения ненужных вызовов
- Реализуйте обновление токенов проактивно до истечения срока их действия, а не реактивно после ошибок 401
- Используйте HTTPS для всей API-коммуникации для защиты токенов при передаче
Избегать
- Хранение JWT-токенов в localStorage без защиты от XSS открывает токены для атак через внедрение скриптов
- Выполнение API-вызовов без обработки ошибок приводит к незаметным сбоям и плохому пользовательскому опыту
- Реализация обновления токенов без координации может вызвать состояния гонки при одновременных запросах