Личный кабинет на Vue в Bitrix

Личный кабинет на Vue в Bitrix

1. Архитектура личного кабинета

Личный кабинет в связке Vue + Bitrix почти всегда строится как гибридная SPA-надстройка.
Bitrix остаётся источником данных и системой авторизации, а Vue берёт на себя весь интерфейс и состояние.

Важно понимать: мы не “заменяем Bitrix”, мы строим отдельный фронтенд, который общается с ним через API.

Vue SPA
   ↓
REST API Bitrix
   ↓
Bitrix (пользователи, заказы, инфоблоки)

Такой подход позволяет не трогать ядро Bitrix и постепенно развивать интерфейс.

2. Авторизация пользователя

Bitrix уже имеет встроенную систему авторизации, и главная задача — корректно передать сессию в Vue.
Обычно используется cookie + AJAX запросы.

Простейшая проверка авторизации через API:

use Bitrix\Main\Loader;

global $USER;

header('Content-Type: application/json');

if ($USER->IsAuthorized()) {
    echo json_encode([
        'auth' => true,
        'id' => $USER->GetID(),
        'name' => $USER->GetFullName()
    ]);
} else {
    echo json_encode([
        'auth' => false
    ]);
}

Vue просто вызывает этот endpoint при загрузке приложения и решает, показывать кабинет или редирект на логин.

const user = ref(null)

async function checkAuth() {
  const res = await fetch('/api/auth/check')
  user.value = await res.json()

  if (!user.value.auth) {
    window.location.href = '/login'
  }
}

Здесь важный момент: Vue не хранит “логику безопасности”, он только отображает результат проверки.

3. API слой Bitrix

Вся логика личного кабинета должна идти через API слой. Это защищает ядро Bitrix и упрощает масштабирование.

Пример получения данных пользователя:

global $USER;

$id = $USER->GetID();

$rsUser = CUser::GetByID($id);
$arUser = $rsUser->Fetch();

echo json_encode([
    'email' => $arUser['EMAIL'],
    'phone' => $arUser['PERSONAL_PHONE'],
    'name' => $arUser['NAME']
]);

Здесь Bitrix выступает как backend-слой, а Vue получает уже готовую структуру.

4. Структура Vue приложения

Личный кабинет обычно разбивается на модули: профиль, заказы, настройки.
Каждый модуль — это отдельный компонент Vue.

/src
  /pages
    Profile.vue
    Orders.vue
  /api
    user.js
    orders.js
  /store
    userStore.js

Такой подход позволяет масштабировать кабинет без превращения проекта в “монолитный компонент”.

5. Профиль пользователя

Профиль — это самый простой, но важный модуль. Он показывает данные, полученные с Bitrix API.

import { ref, onMounted } from 'vue'

const profile = ref({})

onMounted(async () => {
  const res = await fetch('/api/user/profile')
  profile.value = await res.json()
})

Дальше данные просто отображаются в шаблоне.
Vue не делает сложной логики, он лишь синхронизирует состояние с сервером.

6. Заказы пользователя

Самая “тяжёлая” часть личного кабинета — это заказы.
Bitrix хранит их в CRM/интернет-магазине, и выборка может быть дорогой.

use Bitrix\Sale\Order;

$userId = $USER->GetID();

$dbRes = Order::getList([
    'filter' => ['USER_ID' => $userId],
    'select' => ['ID', 'PRICE', 'STATUS_ID']
]);

$orders = [];

while ($order = $dbRes->fetch()) {
    $orders[] = $order;
}

echo json_encode($orders);

Vue получает список заказов и отображает его без логики обработки данных.

const orders = ref([])

async function loadOrders() {
  const res = await fetch('/api/orders')
  orders.value = await res.json()
}

Важно: фильтрация и сортировка должны происходить на сервере, иначе Vue начнёт тормозить на больших данных.

7. Итог

Личный кабинет на Vue в Bitrix — это не замена Bitrix, а надстройка.
Bitrix отвечает за данные и безопасность, Vue — за интерфейс и UX.

Правильная архитектура всегда выглядит одинаково:

Bitrix = backend + бизнес-логика
Vue = SPA интерфейс
API = связующий слой

Если разделение соблюдено, система легко масштабируется и выдерживает большие нагрузки без переписывания ядра.