Система управления правами доступа для бэкенда веб-приложений (VUE+ElementUi+nodeJs+koa2)

Основные технологии

Фронтенд

• Vue + экосистема
• ElementUI

Бэкенд

• Node.js
• Koa2
• Mongoess

База данных

• MongoDB

Введение

Система управления правами доступа на основе VUE и Node.js. Использует простую модель RBAC, где права связаны с ролями, а пользователи получают права через соответствующие роли. Основное внимание уделяется контролю над меню и кнопками.

Страницы

• Страница входа:
  • Изображение
• Управление меню:
  • Изображение
  • Изображение
• Управление пользователями:
  • Изображение
  • Изображение
• Управление ролями:
  • Изображение

Использование

Бэкенд

1. Установите MongoDB: Следуйте инструкциям по установке MongoDB на сайте runoob.com.
2. Установите Node: Следуйте инструкциям по установке Node на сайте runoob.com.
3. Клонируйте код:
   • Перейдите по ссылке на репозиторий git.
4. Настройте базу данных: Найдите файл .env в главном каталоге.

# Адрес базы данных
DB_BASE_URL=mongodb://localhost:27017
DB_NAME=manage

# Среда
NODE_ENV=dev

# Секрет JWT
JWT_SECRET=abcd1234

Измените на свой адрес и имя базы данных (по умолчанию они должны быть одинаковыми). 5. Импортируйте коллекции (можно пропустить, MongoDB создаст их автоматически): Коллекции находятся в папке dbjson в главном каталоге. Если вы не импортируете, в коллекциях будет только одно меню управления и один пользователь (admin, 123456), и вам нужно будет добавить другие меню вручную. 6. Запустите проект: Выполните команды npm install и npm run dev.

Фронтенд

1. Клонируйте код:
   • Перейдите по ссылке на репозиторий git.
2. Настройте адрес бэкенда: В файле .env в главном каталоге (по умолчанию настройки не требуются):

# Информация о проекте
VUE_APP_NAME = MANAGE

# Информация об окружении
# Необязательное значение: development, production
VUE_APP_ENV=development

# Серверная информация (адрес локального прокси)
VUE_APP_SERVER=http://localhost
VUE_APP_SERVER_PORT=443

# API-информация (адрес запросов к бэкенду)
VUE_APP_API=http://localhost:3000

# Информация о странице
VUE_APP_HOST=http://localhost
VUE_APP_PORT=8800
VUE_APP_PATH=http://localhost:8800

# Необязательно: proxy, direct (если установлен proxy, необходимо запустить прокси-сервер, каталог serve/proxy.js)
VUE_APP_API_MODE=direct

3. Запустите:
   • Выполните команду npm Install.
   • Запустите npm run serve. Доступ по адресу: http://localhost:8800.

Инструкция по эксплуатации

1. Вход:
   • Начальный пароль пользователя: admin 123456.
2. Управление меню:
   • Если коллекции не были импортированы, в навигационном меню будет только одно меню «Управление». Для добавления меню можно использовать многоуровневые меню, а маршруты меню соответствуют коду фронтенда. Например, добавьте маршрут для управления пользователями: /sys/user. Если добавляете свою страницу, просто создайте файл xx/xx.vue в каталоге src/view/content и добавьте маршрут: /xx/xx. Если вы выбираете кнопки, вы можете добавить атрибут, чтобы контролировать права кнопок. Например, в /sys/role.vue добавьте компонент perButton и передайте perm для проверки наличия прав на кнопку (обратите внимание: кнопки должны быть на том же уровне, что и меню, иначе меню будет обрабатываться как каталог).

<template>
...
<per-button size="mini" perm="edit"  @click="handleEdit(scope.row)">Редактировать</per-button>
...
<template>

3. Управление ролями:
   • Вы можете назначать права на меню и кнопки для ролей, нажимая на список ролей.