В этом испытании вам предстоит реализовать авторизацию в настоящем SPA (single-page application). Идея состоит в том, что при получении валидной пары логин-пароль сервер возвращает токен, который сохраняется в local storage и отправляется на сервер с каждым клиентским запросом. Приложение состоит из главной, публичной и приватной страниц, а также страницы с формой входа. Часть кода уже написана, внимательно изучите файлы приложения. Выполнение испытания потребует изучения новых хуков и библиотек. Рекомендуем проходить это испытание после выполнения предыдущего.
components/LoginPage.jsx
Реализуйте компонент с формой авторизации пользователя. Форма содержит поля username
и password
. В случае ошибки аутентификации в форме показывается сообщение the username or password is incorrect
. При успешной проверке полученный с сервера токен необходимо сохранить и сделать редирект на ту страницу, с которой пользователь попал в форму логина. Если пользователь зашёл по прямой ссылке, его следует перенаправить на главную страницу.
Пример формы:
<form>
<div class="form-group">
<label class="form-label" for="username">Username</label>
<input placeholder="username" name="username" autocomplete="username" required id="username" class="form-control">
</div>
<div class="form-group">
<label class="form-label" for="password">Password</label>
<input placeholder="password" name="password" autocomplete="current-password" required id="password" class="form-control" type="password">
<div class="invalid-feedback">the username or password is incorrect</div>
</div>
<button type="submit" class="btn btn-outline-primary">Submit</button>
</form>
components/PrivatePage.jsx
Реализуйте компонент, который запрашивает данные с сервера и выводит их. Для получения данных необходимо к запросу добавить заголовок Authorization
, содержащий токен. После проверки сервер вернёт строку, которую нужно вывести на странице. Роутинг настроен так, что на страницу /private
можно попасть только после успешной авторизации.
Tips
- Для проверки авторизации можно использовать слово
user
в качестве логина и пароля - Документация на встроенные хуки: useState, useEffect, useRef, useContext
- Документация на сторонние хуки: useImmer, useFormik
- Документация на библиотеки: React Bootstrap, react-router-dom
For full access to the challenge you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.