Настройка взаимодействия 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/ для cloud Битрикс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 в секунду для cloud), не все сущности доступны, нельзя выполнять произвольные запросы к БД.

Кастомные контроллеры через 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 недели.