Ограничение доступа

Gridstack.js — это библиотека для динамических сеточных интерфейсов с поддержкой drag-and-drop. Для работы с ней необходимо подключить CSS и JS-файлы. Наиболее распространённый способ — через CDN:

<link href="https://cdn.jsdelivr.net/npm/gridstack@8.2.3/dist/gridstack.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/gridstack@8.2.3/dist/gridstack-h5.js"></script>

Для современных проектов с npm:

npm install gridstack
import { GridStack } from 'gridstack';
import 'gridstack/dist/h5/gridstack-dd-native';
import 'gridstack/dist/gridstack.min.css';

После подключения можно инициализировать сетку:

const grid = GridStack.init({
  column: 12,
  float: true,
  resizable: { handles: 'e, se, s, sw, w' },
});

Основные параметры безопасности и ограничения доступа

Gridstack.js предоставляет гибкие механизмы, позволяющие ограничивать действия пользователей внутри сетки. Основные способы ограничения:

  1. Ограничение перетаскивания (drag) С помощью опции disableDrag можно полностью запретить пользователю перемещать виджеты:

    const grid = GridStack.init({ disableDrag: true });

    Для отдельных элементов:

    grid.makeWidget(document.querySelector('#widget1'));
grid.disableMove(document.querySelector('#widget1'));

  2. Ограничение изменения размера (resize) Опция disableResize предотвращает изменение размеров виджетов:

    const grid = GridStack.init({ disableResize: true });

    Для отдельного элемента:

    grid.disableResize(document.querySelector('#widget2'));

  3. Ограничение перемещения за границы сетки Gridstack позволяет настроить границы сетки, чтобы виджеты не выходили за пределы:

    const grid = GridStack.init({
  column: 12,
  float: false,
  cellHeight: 80,
  disableOneColumnMode: true,
});

    Можно контролировать перемещение через события:

    grid.on('change', function(event, items) {
  items.forEach(item => {
    if(item.x + item.w > 12) {
      item.x = 12 - item.w;
      grid.update(item.el, item);
    }
  });
});

Контроль доступа к действиям на уровне виджетов

Gridstack.js поддерживает событийную модель, позволяющую ограничивать действия на основе логики приложения:

  • Событие перемещения: dragstart, drag, dragstop.
  • Событие изменения размера: resizestart, resize, resizestop.

Пример запрета перемещения для пользователя с ролью «viewer»:

grid.on('dragstart', function(event, el) {
  if(user.role === 'viewer') {
    event.preventDefault();
  }
});

Аналогично для изменения размеров:

grid.on('resizestart', function(event, el) {
  if(user.role === 'viewer') {
    event.preventDefault();
  }
});

Ограничение добавления и удаления виджетов

Gridstack позволяет контролировать создание и удаление элементов через API:

  • Добавление виджетов: grid.addWidget()
  • Удаление виджетов: grid.removeWidget()

Можно создавать условие на основе прав доступа:

function addWidget(widgetOptions) {
  if(user.role === 'editor') {
    grid.addWidget(widgetOptions);
  } else {
    console.warn('Недостаточно прав для добавления виджета');
  }
}

function removeWidget(widgetEl) {
  if(user.role === 'editor') {
    grid.removeWidget(widgetEl);
  } else {
    console.warn('Удаление виджета запрещено');
  }
}

Ограничение на уровне данных

Для полноценного контроля доступа часто используется проверка данных перед их отображением. Gridstack.js хранит состояние сетки в JSON:

const serialized = grid.save();

Можно фильтровать виджеты на основе прав пользователя:

const filteredWidgets = serialized.filter(widget => user.canAccess(widget.id));
grid.load(filteredWidgets);

Настройка ограничений через CSS

Дополнительно, можно визуально блокировать элементы для определённых пользователей, добавляя классы:

.widget-locked {
  pointer-events: none;
  opacity: 0.5;
}

Применение к виджету:

if(user.role !== 'editor') {
  document.querySelector('#widget3').classList.add('widget-locked');
}

Ограничение взаимодействия в мобильных устройствах

Gridstack поддерживает адаптивность, но для предотвращения нежелательных действий на мобильных устройствах можно отключить touch-события:

const grid = GridStack.init({
  disableDrag: window.innerWidth < 768,
  disableResize: window.innerWidth < 768,
});

Интеграция с системами авторизации

Все ограничения в Gridstack.js можно связать с системой авторизации приложения. Например, используя JWT или сессии, можно динамически включать или отключать возможность редактирования:

fetch('/api/user')
  .then(res => res.json())
  .then(user => {
    if(user.role !== 'admin') {
      grid.disableMove();
      grid.disableResize();
    }
  });

Итоговая схема ограничения доступа

  1. Глобальные флаги Gridstack (disableDrag, disableResize) — блокируют все действия для всех виджетов.
  2. API для отдельных виджетов (disableMove, disableResize) — блокировка на уровне конкретного элемента.
  3. События drag/resizestart — динамическая проверка прав в момент действия.
  4. Контроль добавления и удаления виджетов через API — предотвращение изменения структуры сетки.
  5. Фильтрация данных и визуальное блокирование через CSS — защита отображения и интерактивности.
  6. Адаптация под мобильные устройства — управление drag/resizable в зависимости от размера экрана.
  7. Интеграция с системой авторизации — динамическое применение ограничений на основе роли пользователя.

Эти механизмы позволяют гибко управлять доступом и обеспечивать безопасность взаимодействия с динамическими сетками в Gridstack.js.

Оглавление