Skip to content

Latest commit

 

History

History
executable file
·
278 lines (201 loc) · 16.3 KB

README.md

File metadata and controls

executable file
·
278 lines (201 loc) · 16.3 KB

Авторизация на основе ролей с использованием Express и Vue

MIT Licence Heroku Maintainability DeepScan grade

🇷🇺 by Mikhail Shpakov

Пример простого клиент-серверного SPA и PWA приложения, которое реализует авторизацию на основе JWT с разделением прав пользователей в зависимости от их роли (пользователь/администратор) и демонстрирует классические CRUD операции.

Имплементация JWT авторизации выполнена в соответствии с описанием и реализует работу с Access и Refresh токенами, а также мультилогин.

🎉 Демо

📺 Дизайн (figma)

📚 Swagger

🔨 Используемые технологии и инструменты

🔧 Локальный запуск проекта

🚀 Деплой на Heroku

Используемые технологии и инструменты

Frontend

Backend

Инфраструктура

Локальный запуск проекта

Для разработки используется Webpack Dev Server для Frontend и nodemon для Backend.

  1. Загрузка проекта на локальную машину

    git clone https://github.com/mikhail-shpakov/role-based-jwt-authorization-with-express-and-vue

  2. Установка зависимостей

    npm ci

    Использование npm ci вместо npm i позволит гарантировать корректные версии устанавливаемых npm пакетов, так как они будут взяты из package-lock.json.
    Зависимости требуется установить отдельно для frontend и для backend из их поддиректорий.

  3. Запуск Docker контейнеров с PostgreSQL и Adminer

    Для локальной разработки используется Docker и Docker Compose. Если они у вас ещё не установлены, то сперва установите их, воспользовавшись какой-либо инструкцией, например, официальной.

    Для запуска контейнеров выполните из директории /server команду:

    docker-compose up

    После этого PostgreSQL будет доступна на localhost:5432.

    Для администрирования можно использовать Adminer, который станет доступен в браузере на http://localhost:9090/.

    Данные для входа:

    Движок: PostgreSQL
Сервер: db // имя контейнера PostgreSQL
Имя пользователя: postgresql
Пароль: dev_pass
База данных: // оставьте это поле пустым

  4. Создание БД и запуск миграций

    Для начала разработки небходимо создать базу данных, добавить таблицы в соответствии с SQL схемой и наполнить эти таблицы тестовыми данными.

    Для автоматизации этого процесса в приложении реализованы механизмы миграций, которые можно запустить с помощью sequelize-cli.

    Инструкцию по установки и подробное описание можно найти в официальном Github репозитории.

    Для запуска миграций выполните из директории /server следующие команды:

    npx sequelize-cli db:create
npx sequelize-cli db:migrate
npx sequelize-cli db:seed:all

  5. Запуск backend сервера для разработки

    В качестве Backend сервера для разработки используется nodemon.

    Для его запуска выполните из директории /server:

    npm run dev

    Сервер будет доступен на http://localhost:8081/.

    Описание всех доступных эндпоинтов можно посмотреть на http://localhost:8081/swagger

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

    Также для Backend из директории /server доступны следующие команды:

    npm run start // запуск проекта при деплое на Heroku
npm run lint // ручной запуск линтера
npm run test // запуск unit тестов

  6. Запуск Frontend сервера для разработки

    В качестве Frontend сервера для разработки используется Webpack Dev Server.

    Для его запуска выполните из директории /client:

    npm run serve

    Также, как и для Backend, во время разработки изменения в файлах будут отслеживаться автоматически, будет вызываться линтер и сервер будет перезапускаться.

    Для Frontend из директории /client доступны следующие команды:

    npm run build // сборка приложения Vue для развёртывания на production
npm run lint // ручной запуск линтера
npm run test:unit // запуск unit тестов

SQL схема БД

SQL схема БД

SQL схема была разработана с помощью dbdiagram.io.

Вы можете склонировать схему этого проекта.

Деплой на Heroku

Деплой на Heroku в общем случае не представляет никаких сложностей и прекрасно описан в официальном руководстве.

Остановимся на специфичных моментах, характерных для этого конкретно приложения:

  1. В качестве БД требуется добавить к приложению, которое вы создадите на Heroku, сервис Heroku Postgres, сделать это можно из маркета.

  2. Для того, чтобы приложение могло подключиться к базе данных, на Heroku требуется добавить переменные окружения. Инструкцию, как это сделать, можно найти здесь.

    Список переменных окружений, которые необходимо добавить:

    DATABASE_USER
DATABASE_PASS
DATABASE_NAME
DATABASE_HOST

    Эти переменные должны быть заданы, как ваши данные для подключения к Heroku Postgres.

  3. Для того, чтобы можно было использовать один проект Heroku для одновременной публикации и Frontend и Backend требуется настроить Backend сервер node.js таким образом, чтобы он отдавал мог отдавать при запросе статичное Vue приложение.

    Подробнее о таком варианте работы можно узнать в этом репозитории.

    Для данного приложения настройка уже выполнена и дополнительных действий не требуется.

  4. У бесплатного аккаунта Heroku есть 2 особенности:

    1. при отсутствии входящих запросов в течении какого-то времени (как правило, 10-30 минут), ваше приложение "засыпает" и при следующем запросе потребуется относительно много времени, чтобы оно проснулось (обычно в пределах 10-40 секунд).

    2. на бесплатном тарифе в месяц выделяется 550 машинных часов на аккаунт (вне зависимости от количества приложений), которые может непрерывно работать приложение, по истечению которых приложение полностью отключается до конца месяца. Но поскольку в месяце 31 * 24 = 744 часов, то получается, что наше приложение в принципе не может работать 24/7.

    Вариантов решения здесь тоже два.

    1. Если вам не требуется круглосуточная работа, а приложение служит для демострационных целей, то будет достаточно, чтобы оно не "засыпало" только в течении основной части дня, а ночью могло "засыпать".

      Для реализации такого алгоритма работы необходимо на любом устройстве, которое у вас работает в течении всего дня или круглосуточно (идеальный вариант - какой-нибудь сервер, но и домашний компьютер подойдёт), настроить запросы curl с помощью cron к вашему приложению раз в 15 минут.

      Пример такого запроса:

      0,15,30,45 7-12 * * * 7-23 * * *  user  curl https://role-based-auth-express-vue.herokuapp.com/login

      Для этого приложения был использован именно этот вариант.

    2. Если вам всё таки нужно, чтобы приложение на бесплатном аккаунте работало 24/7, то можно привязать банковскую карту к аккаунту и тогда количество доступных для аккаунта часов будет увеличенно до 1000, чего уже хватит для круглосуточной работы.

      Для того, чтобы избежать "засыпания" приложения, можно воспользоваться каким-нибудь бесплатным сервисом для мониторинга web-приложений, который раз в какое-то время (например, раз в 10 минут) будет посылать http запросы, тем самым приложение не будет засыпать.

      Таким сервисом может быть, например, UptimeRobot.