Розробка особистого кабінету на Vue.js для 1С-Бітрікс

Розробка особистого кабінету на Vue.js для 1С-Бітрікс

Особистий кабінет — розділ, де SEO не важливий, але важливі швидкість і зручність. Це ідеальний кандидат для переведення на Vue SPA: навігація без перезавантажень, миттєвий зворотний зв'язок на дії, можливість push-сповіщень.

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

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

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

Ініціалізація: передача даних користувача

Бітрікс сервер передає дані авторизованого користувача при завантаженні сторінки ОК:

// У шаблоні розділу /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 без додаткового запиту.

API для розділів ОК

Кожен розділ — окремий контролер:

// Контролер замовлень
class OrderController extends \Bitrix\Main\Engine\Controller
{
    public function listAction(int $page = 1): array
    {
        $userId = $this->getCurrentUser()->getId();
        // Вибірка з b_sale_order WHERE USER_ID = $userId
        // LIMIT 10 OFFSET ($page-1)*10
    }

    public function detailAction(int $orderId): array
    {
        // Перевірка належності замовлення поточному користувачу — обов'язково
        $order = \Bitrix\Sale\Order::load($orderId);
        if ($order->getUserId() !== $this->getCurrentUser()->getId()) {
            throw new \Bitrix\Main\AccessDeniedException();
        }
    }
}

Перевірка належності — критично важлива, без неї існує IDOR-вразливість.

Навігація через 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/*.

Приклад із практики

Дистриб'ютор промислового обладнання: ОК з 6 розділами, включно з керуванням дочірніми акаунтами (менеджер бачить замовлення своїх клієнтів) і документообігом (завантаження рахунків, актів у PDF). Стандартний Бітрікс-ОК на серверних компонентах: кожен перехід — нове завантаження сторінки за 1,5–3 сек. Vue SPA: переходи між розділами миттєві, дані кешуються в Pinia на 5 хвилин, PDF-генерація через background job зі сповіщенням через polling.

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