# Неделя #5: доработка функционала

# Необходимо реализовать:

  1. Обновление токена
  2. Запрет неавторизованным пользователям входа в админку.
  3. Остальные страницы админ-панели.
  4. Юнит-тесты для компонентов
  5. Вывод сохраненных данных из админки на лендинг.

*6. Анимации в слайдере

# Обратите внимание

Начиная с пятницы время действия токена будет равным 1-ой минуте

# 🗓 Понедельник

Реализовываем страницу работы админ-панели.

  • Для сохранения работы вам потребуется помимо остальных данных, также отправить картинку. Что бы сервер обработал запрос корректно, ваши данные (+ файл картинки, полученный из input="file") необходимо упаковать в объект formData при помощи метода append

  • Для вывода только что загруженной картинки (в виде превью) воспользуйтесь объектом FileReader и методом readAsDataURL.

  • Так же в этой статье вы найдете примеры по работе с файлами в приложениях.

# 🗓 Вторник

Реализуем страницу Отзывы

# 🗓 Среда

Реализовываем защиту админки от неавторизованных пользователей

  • Для реализации потребуется выполнения действий перед переходом на роут, в этом помогут хуки навигации
  • Перед переходом на роут, необходимо отправить запрос и проверить является ли пользователь авторизованным, например, можно получить данные о пользователи.
  • Если запрос выполнился корректно (значит есть корректный токен) то пользователя можно пускать внутрь, если произошла ошибка, то пользователя нужно направить на страницу логина /login

# 🗓 Четверг

Смотрим видео-курс Тестирование JS-кода

Смотрим видео-курс Vue. Тестирование компонентов

Пишем юнит-тесты для компонентов:

  • EditLine
  • Skill

Снимаем снепшоты для компонента категории

  • Пустая категория
  • Категория с контентом

Выше приведены компоненты для практики юнит-тестов. Дополнительно покройте тестами настолько много компонентов, насколько у вас хватит времени.

# 🗓 Пятница

Смотрим воркшоп

# 🗓 Оставшееся время до дедлайна

Допишите обновление токена

Для выполнения этого пункта необходимо отслеживать ваши запросы на ошибку со статусом 401. Если придет такая ошибка, значит токен устарел, и его нужно обновить, отправив старый токен на refresh, что вернет вам новый токен с которым необходимо повторить запрос вызвавший ошибку.

Для реализации потребуется механизм interceptors в axios.

Выведите сохраненные данные с сервера на публичную страницу

Для таких запросов токен не потребуется.

Реализовать анимации слайдера

готовим проект к сдаче

# Результат

←