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

🇷🇺 by Mikhail Shpakov

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

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

🎉 Демо

📺 Дизайн (figma)

📚 Swagger

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

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

🚀 Деплой на Heroku

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

Frontend

Vue
Vue Router
Vuex + vuex-persistedstate
Pug
Sass
Buefy
Vue-cli (Webpack, Babel, Postcss)
prerender-spa-plugin (для страницы "О приложении")
Axios
Jest + vue-test-utils
Eslint (standard style)
Fingerprintjs2
jsonwebtoken
Иконки mdi
Графика Undraw

Backend

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

Heroku
PostgreSQL (при публикации на Heroku в качестве БД используется сервис Postgres с бесплатным тарифом)
Adminer
Docker + Docker Compose (используются при локальной разработки для развёртывания PostgreSQL и Adminer)

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

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

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

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

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

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

Для запуска контейнеров выполните из директории /server команду:
```
docker-compose up
```
После этого PostgreSQL будет доступна на localhost:5432.

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

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

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

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

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

Для запуска миграций выполните из директории /server следующие команды:
```
npx sequelize-cli db:create
npx sequelize-cli db:migrate
npx sequelize-cli db:seed:all 
```
Запуск 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 тестов
```
Запуск 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 схема была разработана с помощью dbdiagram.io.

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

Деплой на Heroku

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

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

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

Список переменных окружений, которые необходимо добавить:
```
DATABASE_USER
DATABASE_PASS
DATABASE_NAME
DATABASE_HOST
```
Эти переменные должны быть заданы, как ваши данные для подключения к Heroku Postgres.
Для того, чтобы можно было использовать один проект Heroku для одновременной публикации и Frontend и Backend требуется настроить Backend сервер node.js таким образом, чтобы он отдавал мог отдавать при запросе статичное Vue приложение.

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

Для данного приложения настройка уже выполнена и дополнительных действий не требуется.
У бесплатного аккаунта 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.