Предисловие

Этот туториал предназначен в первую очередь для новичков в разработке на 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