Предисловие
Этот туториал предназначен в первую очередь для новичков в разработке на 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.
Исходный код
Можно найти здесь