Авторизация через контекст

Пример работы

Данные для авторизации:

email: stu@dent.com
password: 123

Общая информация

В этой работе вам нужно написать несколько компонентов, и связать их при помощи контекста.

Контекст создается с помощью компонента AuthProvider. Он находится в файле ./src/contexts/Auth/Auth.js. В нем должна быть определена логика авторизации пользователя, а также функции авторизации, логаута и передача ошибки авторизации.

Функцию авторизации использует форма, в которой пользователь вводит свой логин и пароль. Она находится в файле ./src/components/LoginForm/LoginForm.js Форма подписана на контекст, и выводит ошибку авторизации прямо у себя.

Флаг, авторизован ли пользователь получают хэдер и футер. В случае если пользователь авторизован, футер выводит приветствие, а хэдер - email и кнопку выхода из сессии. Кнопка выхода из сессии вывызвает функцию logout, которую предоставляет контекст.

Основной лэйаут рисуется компонентом Layout (./src/components/Layout/Layout.js). В него можно передать Header и Footer через пропс. Он должен корректно рендериться с этими компонентами и без них.

Что нужно сделать?

Привести приложение в рабочее состояние.

Перед началом работы не забудьте установить пакеты. Выполните команду yarn или npm install

• Дописать функционал контекста авторизации. Файл ./src/contexts/Auth/Auth.js.

  Хранит статус авторизации. Предоставляет методы authorize и logout.

  Подробнее разобраться как он должен работать можно прочитав тесты Auth.test.js

• Написать компонент Header. Файл ./src/components/Header/Header.js.

  Если пользователь авторизован - показывает email и кнопку logout.

  Подробности в тестах: ./src/components/Header/Header.js

• Написать компонент Footer. Файл ./src/components/Footer/Footer.js.

  Показывает статус авторизации пользователя.

  Подробности в тестах: ./src/components/Footer/Footer.js

• Написать компонент Layout. Файл ./src/components/Layout/Layout.js.

  Он содержит логику отображения лейаута включая компоненты Header и Footer, которые получает через props.