Vue-role

Проект представляет собой:

Vue-role — это основанная на Vue библиотека для визуального управления правами доступа, которая упрощает определение прав разработчиками и их назначение нетехническими специалистами.

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

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

Чтобы активировать режим управления правами, нажмите Ctrl+/ (или Cmd+/ на Mac). Все позиции, где можно определить права, будут отмечены точками (красными, зелёными или жёлтыми). Нажав на точку, вы можете назначить права. В правом верхнем углу находится красная точка, с помощью которой можно определить доступ к текущей странице (маршруту). Также в правом верхнем углу можно имитировать просмотр страницы от имени определённой роли.

Визуализация:

Красный цвет означает, что права уже назначены; зелёный — права ещё не назначены, и любой может просматривать страницу; жёлтый — права ещё не назначены, но только суперпользователь может просматривать страницу.

Онлайн-демонстрация:

https://tengzhinei.gitee.io/vue-role/example/index.html

DEMO использует фреймворк VUE-RAP. VUE-RAP позволяет быстро создавать одностраничные приложения на основе Vue без использования большого количества инструментов (таких как npm, webpack, Browserify и т. д.).

Адрес VUE-RAP: https://gitee.com/tengzhinei/Vue-rap

Установка:

1. Импортируйте файл vue-role.css.
2. После Vue импортируйте файл vue-role.js.

Начало работы:

// Права определяются только после того, как бэкенд вернёт отредактированные права.
var roles = {
    'user.add': [1, 2],
    'user.edit': [2, 3]
};

// Конфигурация
VueRole.config({
    role: 1, // Права текущего пользователя
    super_role: 1, // Права суперпользователя
    roles: roles, // Данные о правах
    role_names: {
        '1': 'Суперпользователь',
        '2': 'Технический специалист',
        '3': 'Редактор'
    }, // Названия прав
    lang: { // Языковой пакет может быть пустым
        title: 'Настройка прав',
        sys_role: 'Системная настройка, не редактируется',
        f: 'Не выбрано, кроме суперпользователя никто не имеет доступа',
        f_not: 'Не выбрано, любой может получить доступ',
        cancel: 'Отмена',
        submit: 'Отправить',
        imitate: 'Имитация',
        close: 'Закрыть'
    }
});

// Сохранение при редактировании прав
VueRole.onRoleEdit(function (action, roles, close) {
    // Во время тестирования права сохраняются непосредственно в локальном кэше localStorage.
    localStorage.setItem('vue_role@' + action, JSON.stringify(roles));
    close();
});

API:

Директива v-role:

Методы: