Туториал: Frontity — настройка авторизации для приватных эндпоинтов WordPress

Предисловие

Этот туториал предназначен в первую очередь для новичков в разработке на Frontity (React framework для WordPress)

Основная цель

Собрать в одном месте всю необходимую информацию для настройки авторизации для приватных эндпоинтов WordPress на примере получения коллекции меню (wp-json/wp/v2/menus)

Шаг 1 - установка/настройка плагина

Добавить Wordpress плагин - JWT Authentication for WP-API

Внести настройки плагина в файлы .htaccess и wp-config.php согласно инструкции на сайте плагина

Шаг 2 - настройка переменных окружения

Создать .env фал и наполнить его (например)

USERNAME='SOME USERNAME'
PASSWORD='SOME PASSWORD'

Добавить в package.json скрипт

"dev": "env-cmd -f .env frontity dev"

 Шаг 3 - получение токена

Добавить action получения токена в actions.theme.beforeSSR

const beforeSSR = async ({ state }) => {
  const res = await fetch(
    `${state.source.api}jwt-auth/v1/token`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: process.env.USERNAME,
        password: process.env.PASSWORD,
      }),
      redirect: 'follow',
    },
  );

  const body = await res.json();

  // сохраняем в любое удобное место (я записал по этому пути)
  state.theme.token = body.token;
};

Шаг 4 - получение данных

Создаем handler получения списка созданных меню

export const menusHandler = {
  name: 'menus',
  priority: 10,
  pattern: 'menus',
  // Эта функция сработает, когда вы используете:
  // actions.source.fetch("menus");
  func: async ({ state, libraries }) => {
    const response = await fetch(`${state.source.api}wp/v2/menus`, {
      method: 'GET',
      headers: {
        // добавляем токен, полученный в предыдущем шаге, в заголовок авторизации
        Authorization: `Bearer ${state.theme.token}`,
      },
    });

    // Извлекаем данные из объекта ответа
    const data = await response.json();

    state.source.data.menu = {};

    // Это данные, возвращаемые при использовании:
    // state.source.get("menu");
    Object.assign(state.source.data.menu, {
      data,
      isMenu: true,
    });
  },
};

Добавляем handler по следующему пути libraries.source.handlers

Заключение

В результате проделанной работы вы настроете механизм авторизации для приватных эндпоинтов WordPress