Система управления правами доступа для бэкенда (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. Управление меню: Если вы не импортировали JSON, у вас будет только одно меню — «Управление меню». Вы можете добавлять многоуровневые меню, а маршруты меню соответствуют коду фронтенда. Например, чтобы добавить маршрут для управления пользователями, используйте: /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. Управление ролями: Вы можете назначать меню и кнопки для ролей, нажимая на роли в списке.