Туториал: 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.

Исходный код

Можно найти здесь