Налагодження взаємодії Vue.js з REST API 1С-Бітрікс

Налаштування взаємодії Vue.js з REST API 1С-Бітрікс

Бітрікс надає кілька механізмів для роботи з даними з Vue: вбудований REST API (/bitrix/rest/), ORM-методи через AJAX-контролери (Bitrix\Main\Engine\Controller) і прямі AJAX-запити до обробників компонентів. Вибір механізму впливає на продуктивність, безпеку та обсяг коду. Розглянемо кожен підхід із практичними прикладами.

Вбудований REST API Бітрікс

Доступний за адресою /rest/ для хмарного Бітрікс24 і вимагає налаштування для «коробкової» версії. Методи — sale.basket.getlist, catalog.product.list, crm.deal.list та інші. Авторизація через OAuth 2.0 або вебхуки (webhook URL з токеном).

Для публічного API на сайті (не Бітрікс24) — вебхуки з обмеженими правами:

const BX_WEBHOOK = window.BX_STATE.webhook; // передається з PHP

async function getProducts(filter) {
    const res = await fetch(`${BX_WEBHOOK}catalog.product.list`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ filter, select: ['ID', 'NAME', 'PRICE'] }),
    });
    return res.json();
}

Обмеження вбудованого REST: ліміти запитів (50 на секунду для хмари), не всі сутності доступні, не можна виконувати довільні запити до БД.

Кастомні контролери через Engine\Controller

Для проєктів на «коробковому» Бітрікс — основний спосіб. Контролер живе у кастомному модулі:

// local/modules/project.api/lib/controller/product.php
namespace Project\Api\Controller;

use Bitrix\Main\Engine\Controller;
use Bitrix\Main\Engine\ActionFilter;

class Product extends Controller
{
    public function configureActions(): array
    {
        return [
            'list' => [
                'prefilters' => [new ActionFilter\Authentication()],
            ],
        ];
    }

    public function listAction(int $categoryId, int $page = 1): array
    {
        $pageSize = 20;
        $res = \CIBlockElement::GetList(
            ['SORT' => 'ASC'],
            ['IBLOCK_ID' => CATALOG_IBLOCK_ID, 'SECTION_ID' => $categoryId, 'ACTIVE' => 'Y'],
            false,
            ['nPageSize' => $pageSize, 'iNumPage' => $page],
            ['ID', 'NAME', 'DETAIL_PICTURE', 'PROPERTY_PRICE']
        );

        $items = [];
        while ($item = $res->GetNext()) {
            $items[] = $item;
        }
        return ['items' => $items, 'page' => $page];
    }
}

URL контролера: /bitrix/services/main/ajax.php?action=project:api.product.list. Автоматично додає CSRF-захист при POST.

Axios у Vue: єдиний API-сервіс

// services/api.js
import axios from 'axios';

const api = axios.create({
    baseURL: '/bitrix/services/main/ajax.php',
    headers: { 'X-Requested-With': 'XMLHttpRequest' },
});

// Автоматично додаємо CSRF-токен
api.interceptors.request.use(config => {
    if (config.method === 'post') {
        config.data = { ...config.data, sessid: window.BX.bitrix_sessid() };
    }
    return config;
});

// Обробка 401 — редирект на авторизацію
api.interceptors.response.use(
    res => res.data,
    err => {
        if (err.response?.status === 401) {
            window.location.href = '/auth/?backurl=' + encodeURIComponent(location.pathname);
        }
        return Promise.reject(err);
    }
);

export const getProducts = (categoryId, page) =>
    api.post('', { action: 'project:api.product.list', categoryId, page });

Усі Vue-компоненти використовують функції з services/api.js — не роблять fetch напряму. Зміна URL або механізму авторизації — в одному файлі.

Composable для даних

// composables/useProducts.js
export function useProducts(categoryId) {
    const items = ref([]);
    const loading = ref(false);
    const error = ref(null);
    const page = ref(1);

    async function load() {
        loading.value = true;
        error.value = null;
        try {
            const data = await getProducts(categoryId.value, page.value);
            items.value = page.value === 1 ? data.items : [...items.value, ...data.items];
        } catch (e) {
            error.value = e.message;
        } finally {
            loading.value = false;
        }
    }

    watch(categoryId, () => { page.value = 1; load(); }, { immediate: true });
    return { items, loading, error, page, loadMore: () => { page.value++; load(); } };
}

Composable інкапсулює логіку завантаження, компонент працює лише з реактивними даними.

CORS і політика безпеки

Для SPA на окремому піддомені (app.example.com) до API на (example.com) потрібне налаштування CORS у PHP:

// на початку контролера або в події OnPageStart
header('Access-Control-Allow-Origin: https://app.example.com');
header('Access-Control-Allow-Credentials: true');

Cookie-сесія Бітрікс відправляється з withCredentials: true в axios — сесія авторизації працює кросдоменно.

Типовий строк: налаштування API-сервісу з 3–5 методами, axios з інтерцепторами, базові composables — 2–3 робочі дні. Розробка повноцінного REST API для каталогу + кошик + авторизація — 1–2 тижні.