Javascript: Авторизация

JS: React Hooks 14 сообщений
Обновлено: 04 мая, 12:37
194
Студента
73%
Завершения

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

Подсказки

  • Для проверки авторизации можно использовать слово user в качестве логина и пароля

  • Документация на встроенные хуки: useState, useEffect, useRef, useContext

  • Документация на сторонние хуки: useImmer, useFormik

  • Документация на библиотеки: React Bootstrap, react-router-dom

Для полного доступа к испытанию нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов