Разработка личного кабинета на 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.

Сроки выполнения