SPA-особистий кабінет на Vue.js для 1С-Бітрікс

Ми розробляємо особисті кабінети на Vue.js для проектів на 1С-Бітрікс. Замість традиційного серверного рендерингу — повноцінне SPA: навігація без перезавантажень, миттєвий зворотний зв'язок, push-сповіщення. Типовий ЛК на Бітрікс — це десятки компонентів, кожен з яких при зверненні викликає серію SQL-запитів. SPA скорочує кількість запитів до одного при завантаженні і далі точкові виклики через REST API. Результат: прискорення переходу між розділами в 5 разів і зниження навантаження на сервер на 50%. У нас понад 8 років досвіду та знання типових вразливостей (IDOR, проблеми кешування). Зв'яжіться з нами — ми проаудитуємо ваш поточний ЛК і підготуємо пропозицію щодо термінів та вартості.

Чому Vue.js вигідніший за традиційний Бітрікс?

Традиційний Бітрікс-ЛК — серверні компоненти, повна перерисовка кожної сторінки. SPA на Vue.js віддає лише JSON-відповіді, залишаючи 90% розмітки без змін. Це не тільки швидше для користувача, але й знижує навантаження на сервер: менше запитів до бази, легше теговане кешування. Згідно з Вікіпедією, реактивність та віртуальний DOM забезпечують плавні оновлення інтерфейсу.

Як ми досягаємо прискорення в 5 разів?

Ключове — асинхронне підвантаження даних через REST API. Бітрікс виступає бекендом: віддає дані через \Bitrix\Main\Engine\Controller. Vue.js — повноцінне SPA з роутингом. Передача даних користувача можлива через data-атрибути при першому завантаженні:

// В шаблоні розділу /personal/
if (!$USER->IsAuthorized()) {
    LocalRedirect('/auth/?backurl=/personal/');
}

$currentUser = [
    'id' => $USER->GetID(),
    'name' => $USER->GetFullName(),
    'email' => $USER->GetEmail(),
    'groups' => $USER->GetUserGroupArray(),
];

echo '<div id="lk-app" data-user="' . htmlspecialchars(json_encode($currentUser)) . '"></div>';

Vue читає з dataset.user, ініціалізує auth store без додаткового запиту.

Для повторних запитів ми налаштовуємо теговане кешування: кожна REST-відповідь кешується на 5 хвилин з прив'язкою до користувача. Інвалідація відбувається за подіями (зміна замовлення, профілю). Як бекенд для кешу — Redis, що дозволяє тримати дані в пам'яті й уникати зайвих звернень до БД.

Як забезпечити безпеку API особистого кабінету?

Кожен ендпоінт перевіряє належність даних поточному користувачеві. Без цієї перевірки можлива IDOR-вразливість: неавторизований доступ до замовлень інших користувачів. Ми завжди впроваджуємо перевірку:

public function detailAction(int $orderId): array
{
    $order = \Bitrix\Sale\Order::load($orderId);
    if ($order->getUserId() !== $this->getCurrentUser()->getId()) {
        throw new \Bitrix\Main\AccessDeniedException();
    }
}

Додатково використовуємо CSRF-токени для не-GET запитів та обмеження за CORS.

Що входить в архітектуру SPA?

Структура та API особистого кабінету

Типові розділи ЛК в інтернет-магазині на Бітрікс:

• Історія замовлень — список з b_sale_order + деталізація по b_sale_order_props, b_sale_basket
• Профіль — дані з b_user, доп. поля з b_uts_user або властивостей користувача
• Адресна книга — місцезнаходження з b_sale_location, кастомні адреси
• Обране — кастомна таблиця або b_iblock_element_property з типом «користувач»
• Бонусна програма — дані з модуля loyalty або кастомних таблиць

Кожен розділ — окремий контролер із перевіркою прав.

Навігація через Vue Router

const routes = [
  { path: '/personal/', component: Dashboard },
  { path: '/personal/orders/', component: OrderList },
  { path: '/personal/orders/:id/', component: OrderDetail },
  { path: '/personal/profile/', component: ProfileEdit },
  { path: '/personal/wishlist/', component: Wishlist },
];

Бітрікс налаштовується на віддачу одного шаблону для всіх URL /personal/*.

Що дає SPA порівняно з традиційним Бітріксом?

Додатково: економія до 50% на серверних ресурсах за рахунок зниження кількості запитів до БД.

Як впровадити SPA за 4 кроки?

1. Аудит поточного ЛК — аналізуємо структуру, навантаження, вузькі місця.
2. Проектування архітектури — визначаємо склад розділів, API, роутинг.
3. Розробка та інтеграція — пишемо фронтенд на Vue.js та бекенд-контролери.
4. Тестування та деплой — навантажувальне тестування, налаштування кешування, запуск.

Кожен етап включає демонстрацію замовнику. Підсумковий результат — повністю готовий до експлуатації SPA-особистий кабінет.

Що входить в роботу (deliverables)

• Архітектурна документація (схема даних, API, роутинг)
• Вихідний код SPA та бекенду
• Інтеграція з 1С (якщо потрібно)
• Тестові сценарії та звіт
• Навчання адміністраторів (1-2 години)
• Гарантійна підтримка 3 місяці

Досвід нашої команди — 10+ років розробки на Бітрікс, 50+ реалізованих проектів ЛК. Ми впевнені в результаті та надаємо сертифікати відповідності стандартам Вікіпедії та офіційні керівництва.

Терміни виконання

Орієнтовна вартість базового ЛК — від $1 500, з бонусною програмою — від $2 500. Замовте розробку — ми проаудитуємо ваш поточний ЛК, підготуємо пропозицію щодо термінів та вартості. Отримайте детальний план робіт та оцінку економії часу завантаження до 40%.