WEB-программирование (онлайн лекция 5, система прав и авторизация через сессию на Vue 3)

Опубликовано: 09 Ноябрь 2024
на канале: Михаил Каташевцев

374

Файлы к видео https://disk.yandex.ru/d/T2HqT1pHi8HF9Q

00:00:00 Введение
00:00:55 Описываем Api
00:03:50 PHP. Создаем проект и подключаем к laragon
00:05:51 PHP. Ставим фреймворк slim
00:09:20 PHP. Пишем болванку под /api/login
00:12:30 PHP. Создаем файл для тестирования через плагин REST Client
00:13:30 PHP. Создаем болванку под маршрут /api/check-login
00:14:50 PHP. Создаем метод для генерации JSON ответа
00:16:00 PHP. Создаем болванку под маршрут /api/logout
00:17:00 PHP. Включаем сессию
00:18:30 PHP. Перехватываем юзер и пароль из POST запроса в /api/login
00:21:35 PHP. Создаем сервис UserService для работы с данными юзеров
00:25:50 PHP. Проверяем наличие юзера в /api/login по имени и паролю
00:27:25 PHP. Сохраняем идентификатор юзера в $_SESSION
00:30:10 PHP. Вытаскиваем user_id из $_SESSION в /api/check-login по
00:32:00 PHP. Очищаем user_id в $_SESSION в /api/logout
00:30:10 PHP. Вытаскиваем информацию по юзеру в /api/check-login по user_id из $_SESSION
00:35:10 PHP. Формируем список доступных permissions и передаем их superuser
00:37:00 PHP. Делаем middleware по добавлению информации о юзере в каждый запрос
00:42:00 Прикидываем работу Vue приложения
00:42:31 Vue. Утаскиваем php код в папку server и создаем vue болванку
00:45:25 Vue. Создаем страницы Main, Admin, Login и настраиваем router
00:47:30 Vue. Подключаем axios и bootstrap
00:49:10 Vue. Верстаем навигацию
00:52:00 Vue. Закрываем доступ к Admin
00:55:15 Vue. Верстаем страницу Login
00:58:00 Vue. Создаем store под авторизацию
01:01:00 Vue. Настраиваем proxy у dev server
01:01:35 Vue. Реализуем authStore.login
01:03:25 Vue. Создаем переменные в хранилище и реализуем authStore.checkLogin
01:07:00 Vue. Реализуем авторизацию через страницу Login
01:12:05 Vue. Добавляем метод authStore.can для проверки permissions
01:13:15 Vue. Проверяем права на доступ к страницу в router
01:15:12 Vue. Правим баг редиректа при успешном логине
01:17:50 Vue. Подытоживаем процесс авторизации
01:20:15 Vue. Восстанавливаем авторизацию при перезапуске бразуера
01:21:22 Vue. Делаем кнопку для Logout
01:22:52 Vue. Вытаскиваем переменные из store с помощью storeToRefs
01:25:10 Vue. Перебрасываем на главную страницу при деавторизации
01:25:54 Vue. Прячем элементы на странице с учетом прав пользователя
01:27:45 Итоги