Создание экрана входа в систему с помощью React и Bootstrap
security reactjs good-company bootstrap authentication authorization session-management jwt-token

Создание экрана входа в систему с помощью React и Bootstrap

5 мая 2022 г.

Большинство современных веб-приложений требуют от пользователей регистрации, чтобы использовать определенные функции или посещать определенные страницы, но создание формы входа — одна из самых утомительных задач. В этой статье мы создадим простой и элегантный экран входа в систему, используя React и Bootstrap 5.


Предпосылки


  • Базовое понимание HTML, CSS и Javascript

  • Базовое понимание React

  • Установите NodeJS на свой компьютер

Настройте приложение React


Выполните следующую команду, чтобы создать новый проект реакции:


``ш


npx создать-реагировать-приложение реагировать-логин


Перейдите в проект и запустите приложение


``ш


cd реагировать-логин


запуск нпм


Когда сборка будет готова, приложение должно выглядеть так:



Установить Bootstrap


Установите загрузчик с помощью npm:


``ш


npm install – сохранить бутстрап


Отредактируйте App.js и добавьте оператор импорта для начальной загрузки.


```jsx


импортировать "bootstrap/dist/css/bootstrap.min.css"


Мы также продолжим и удалим шаблонный код, который приложение React по умолчанию добавляет в App.js. Теперь файл должен выглядеть так:


```jsx


импортировать "bootstrap/dist/css/bootstrap.min.css"


импортировать "./App.css"


приложение функции () {


вернуть


экспортировать приложение по умолчанию


Настройка маршрутов


Сначала мы создадим новый компонент Auth в Auth.js. Мы поработаем над фактическим компонентом Auth позже, а сейчас он нам нужен для настройки маршрутов.


```jsx


импортировать React из «реагировать»


функция экспорта по умолчанию (реквизит) {


return

Экран аутентификации


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


``ш


npm install --save реакция-маршрутизатор-дом


Измените файл App.js, чтобы настроить маршруты по умолчанию и вход в систему. Мы покажем пользовательский интерфейс входа в систему на маршруте /auth.


```jsx


импортировать "bootstrap/dist/css/bootstrap.min.css"


импортировать "./App.css"


импортировать {BrowserRouter, Routes, Route} из "react-router-dom"


импортировать Auth из "./Auth"


приложение функции () {


возврат (


<Браузермаршрутизатор>


<Маршруты>


} />




экспортировать приложение по умолчанию


Создать форму входа


Измените Auth.js, который мы создали ранее.


```jsx


импортировать React из «реагировать»


функция экспорта по умолчанию (реквизит) {


возврат (





Войти




<ввод


тип = "электронная почта"


className="форма-управление mt-1"


placeholder="Введите адрес электронной почты"





<ввод


тип = "пароль"


className="форма-управление mt-1"


placeholder="Введите пароль"






Забыли пароль?






Также измените App.css, чтобы включить:


``CSS


.Приложение {


цвет фона: белый;


.Auth-форма-контейнер {


дисплей: гибкий;


выравнивание содержимого: по центру;


выравнивание элементов: по центру;


ширина: 100vw;


высота: 100вх;


.Аут-форма {


ширина: 420 пикселей;


box-shadow: rgb(0 0 0/16%) 1px 1px 10px;


отступ сверху: 30px;


нижний отступ: 20px;


радиус границы: 8px;


цвет фона: белый;


.Содержимое формы авторизации {


заполнение слева: 12%;


заполнение справа: 12%;


.Аутентификация-форма-название {


выравнивание текста: по центру;


нижняя граница: 1em;


размер шрифта: 24px;


цвет: RGB(34, 34, 34);


вес шрифта: 800;


метка {


размер шрифта: 14px;


вес шрифта: 600;


цвет: RGB(34, 34, 34);


Если вы откроете /auth маршрут, вы должны увидеть форму



Добавляем форму регистрации


Обычно вы хотите разрешить пользователям регистрироваться, если они еще этого не сделали. Измените компонент Auth.js.


```jsx


импортировать React, {useState} из "реагировать"


функция экспорта по умолчанию (реквизит) {


пусть [authMode, setAuthMode] = useState ("вход")


константа changeAuthMode = () => {


setAuthMode(authMode === "вход" ? "регистрация" : "вход")


если (authMode === "вход") {


возврат (





Войти



Еще не зарегистрированы?{" "}



Зарегистрироваться






<ввод


тип = "электронная почта"


className="форма-управление mt-1"


placeholder="Введите адрес электронной почты"





<ввод


тип = "пароль"


className="форма-управление mt-1"


placeholder="Введите пароль"






Забыли пароль?






возврат (





Войти



Уже зарегистрирован?{" "}



Войти






<ввод


тип = "электронная почта"


className="форма-управление mt-1"


placeholder="например, Джейн Доу"





<ввод


тип = "электронная почта"


className="форма-управление mt-1"


заполнитель = "Адрес электронной почты"





<ввод


тип = "пароль"


className="форма-управление mt-1"


заполнитель = "Пароль"






Забыли пароль?






Мы используем useState для переключения между входом и регистрацией. Теперь, когда вы посещаете /auth, вы можете переключаться между входом и регистрацией.




Вывод


Мы создали пользовательский интерфейс для входа/входа, используя React с Bootstrap. Тем не менее, чтобы заставить его работать, нужно еще поработать — делать вызовы API и управлять сеансами. Чтобы быстро настроить их, оформите заказ SuperTokens


Написано пользователями SuperTokens — надеюсь, вам понравилось! Мы всегда доступны на нашем сервере Discord. Присоединяйтесь к нам, если у вас есть вопросы или вам нужна помощь.


Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE