1) Установка

// vue 2
npm install @napopravku/perm-ui-lib-vue2

// vue 3
npm install @napopravku/perm-ui-lib-vue3

2) Подключение

// main.ts

// vue 2
import { permissionPlugin } from '@napopravku/perm-ui-lib-vue2/casl';
permissionPlugin.install(Vue);

// vue 3
import { permissionPlugin } from '@napopravku/perm-ui-lib-vue3/casl';
permissionPlugin.install(Vue);

3) Использование permissions (одинаково для vue2 и vue3)

Библиотека основана на CASL.

// импорт vue 2
import { rules, updateRules, clearRules } from '@napopravku/perm-ui-lib-vue2/casl';

// импорт vue 3
import { rules, updateRules, clearRules } from '@napopravku/perm-ui-lib-vue3/casl';

// обновление доступов
updateRules([
  { 
    action: ['read', 'update'], 
    subject: 'document' 
  }
]);

// удаление всех доступов
clearRules();

// массив доступов
rules.value;

4) Использование объекта permissions (одинаково для vue2 и vue3)

// импорт vue 2
import { permissions } from '@napopravku/perm-ui-lib-vue2/casl';

// импорт vue 3
import { permissions } from '@napopravku/perm-ui-lib-vue3/casl';

// permissions — это объект ability из CASL, подробности [тут](https://casl.js.org/v6/en/api/casl-ability)

// проверка доступов через can
permissions.can('read', 'article'); // boolean

5) Использование компонента Permission (одинаково для vue2 и vue3)

<script>
// импорт vue 2
import Permission from '@napopravku/perm-ui-lib-vue2/permission';

// импорт vue 3
import Permission from '@napopravku/perm-ui-lib-vue3/permission';
</script>

<template>
  <Permission subject="user" action="read">
    {{ item.createdBy.name }}
  </Permission>
</template>

6) Продвинутые возможности Permission

Управление режимом unscopedMode

При установке unscopedMode=true компонент не скрывает содержимое при отсутствии прав, а блокирует взаимодействие визуально.

<Permission subject="user" action="update" :unscopedMode="true">
  Редактирование информации о пользователе
</Permission>

Кастомизация тега-обёртки

С помощью свойства tag меняется HTML-тег обёртки (по умолчанию div).

<Permission subject="article" action="read" tag="section">
  <h2>Содержание статьи</h2>
</Permission>

7) Свойства компонента Permission подробно

| Свойство | Тип | Описание | |-----------------------|-------------------------------------------------------------|-----------------------------------------------------------------------------------------------| | type | 'block' | 'image' | 'text' | 'phone' | Вид отображения, влияет на fallback визуализацию. По умолчанию 'block'. | | tag | string | HTML-тег для обёртки контента, по умолчанию div. | | unscopedMode | boolean | Если true, показывается содержимое, но оно блокируется (затемнение и запрет событий). | | action | 'read' | 'update' | 'delete' | 'create' | Действие, для которого проверяется разрешение. | | subject | string | Субъект (ресурс), к которому запрашивается доступ. | | generateTemplateTooltip | (rule: RawRule | null) => string | Функция для генерации пользовательского текста тултипа при отсутствии права. | | isDebag | boolean | Включает отладочный вывод правил в консоль (для разработки). |

8) Как добавить свои правила и обновить права

Для обновления массива правил используется функция updateRules. Правила формируются с полями code, name и action.

updateRules([
  { code: 'document', name: 'Документ', action: ['read', 'update'] },
  { code: 'user', name: 'Пользователь', action: ['read'] }
]);

Для очистки прав вызывается clearRules().

9) Рекомендации по интеграции с CASL

• Объект permissions — это экземпляр Ability из CASL; доступно стандартное API (can(), cannot(), rules и т.п.).
• Для реактивного обновления прав используйте реактивность Vue и события обновления правил.
• Компонент Permission поддерживает слоты для fallback-контента, что позволяет кастомизировать отображение при отсутствии прав.

10) Пример использования всех возможностей

<script setup lang="ts">
import Permission from '@napopravku/perm-ui-lib-vue3/permission';
import { updateRules } from '@napopravku/perm-ui-lib-vue3/casl';

updateRules([
  { code: 'article', name: 'Статья', action: ['read', 'update'] },
]);
</script>

<template>
  <Permission subject="article" action="read" tag="section" :unscopedMode="false" :isDebag="true">
    <h1>Контент статьи</h1>
    <template #fallback>
      <p>У вас нет доступа для чтения статьи.</p>
    </template>
  </Permission>
</template>