Аутентификация в React с помощью Context API и React Router v6 (Typescript)


Создание нового проекта

Сначала мы создадим новый проект React с помощью Vite, но вы можете выбрать наиболее подходящий для вас вариант.
Чтобы начать новый проект, мы воспользуемся командой ниже:

#npm
npm create vite@latest my-auth-app --template react-ts

#yarn
yarn create vite my-auth-app --template react-ts
Войти в полноэкранный режим Выйти из полноэкранного режима

После этого нам необходимо установить все зависимости, сгенерированные Vite.
Для этого выполним команду:

#npm
npm install

#yarn
yarn
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Прежде чем начать писать, удалим некоторые файлы из нашего проекта, чтобы сделать его чище:

Не забудьте удалить все строки кода, которые зависели от этих удаленных файлов.

Теперь установим react-router-dom для создания наших маршрутов.

#npm
npm install react-router-dom
npm install @types/react-router-dom -D

#yarn
yarn add react-router-dom
yarn add @types/react-router-dom
Вход в полноэкранный режим Выйдите из полноэкранного режима

Готово! Теперь мы можем начать кодировать наши компоненты и контекст.

Создание страниц нашего проекта

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

Я начну создавать простую домашнюю страницу следующим образом:

И страницу входа вот так:

Создание маршрутов

Я начал создавать наш маршрут входа в систему следующим образом

Передача компонента Routes внутрь нашего App.tsx

Если вы запустите свое приложение, вы получите вот такой маршрут /login:

Создание контекста

Настройка наших частных маршрутов

Использование контекста на странице входа в систему

Готово! Теперь, когда вы нажмете на кнопку Authenticate на странице Login, вы установите состояние authenticated в true и будете перенаправлены на Homepage.

Этот простой проект можно найти на github:
https://github.com/GabrielDNeto/React-Authentication-ContextAPI—react-router-dom

Оцените статью
devanswers.ru
Добавить комментарий