Javascript: Authorization

JS: React Hooks
Last update: 24 Mar 23:20
0
Students

В этом испытании вам предстоит реализовать авторизацию в настоящем 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.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests