Создание нового проекта
Сначала мы создадим новый проект 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