JavaScript: Authorization

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