Убедитесь, что ваши пользователи аутентифицированы с использованием современных технологий, таких как Axios, JWT и TypeScript.
Проверка подлинности пользователя - важная часть создания современного веб-приложения. Сегодня мы рассмотрим общий подход с использованием JWT-доступа и токенов обновления с помощью Axios. Примеры будут написаны на TypeScript, но также должны работать на простом JavaScript. Если вас это интересует, к образцу кода можно получить доступ по этой ссылке на песочницу кода: https://codesandbox.io/s/react-typescript-n8hmb?fontsize=14
Установка зависимостей
Просто запустите npm i jsonwebtoken axios -S и, если вы используете TypeScript, обязательно сохраните как зависимость разработчика npm i typescript -D.
Настройка утилиты аутентификации
Чтобы создать несколько многоразовых функций, которые взаимодействуют с API localStorage браузера и нашей логикой JWT, мы создадим файл утилиты аутентификации auth.ts. Это будет содержать логику для определения того, аутентифицирован ли пользователь до того, как мы выполним вызов API. Этот файл также будет предоставлять функции, которые дадут нам доступ к извлечению и установке токенов доступа и обновления, когда они должны быть обновлены.
Выполнение HTTP-запросов с помощью Axios
В нашей интеграции с Axios мы хотим предоставить функции, которые дадут нам доступ к внешним API, которые будут выполнять аутентификацию за нас. Мы хотели бы иметь контракт, который требует от нас только указать конечную точку и любые соответствующие данные. Давайте посмотрим, как это можно сделать. Назовем этот файл api.ts.
Здесь у нас есть вспомогательная функция performAuthenticatedRequest, которую можно использовать для предоставления методов get, post, put и delete для выполнения HTTP-запросов к любому указанному нами внешнему API.
Вам нужно будет реализовать логику для получения нового токена доступа для токена обновления на вашем сервере - или использовать такую службу, как Auth0, которая сделает это за вас.
Заключение
Вот и все! Не тонна кода, но важно понимать разделение логики здесь и создавать функции многократного использования, которые позволяют нам проходить аутентификацию и взаимодействовать с внешними API.
Хотите узнать больше о TypeScript?
Спасибо за чтение и удачи в ваших проектах! Оставьте комментарий или напишите мне, если у вас есть вопросы.
