Предисловие

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

Комментарии (4)


  1. ToxicDesigner
    01.11.2022 23:04

    Приветствую! можете добавить ссылку на исходники?


  1. ToxicDesigner
    01.11.2022 23:04

    Приветствую! можете добавить ссылку на исходники?


    1. kas_elvirov Автор
      01.11.2022 23:05

      Так точно, в процессе оформления :)


  1. ankaid
    02.11.2022 19:21

    Считаю эту статью не очень актуальной ибо:
    > Frontity Framework is not under active development anymore. Pull requests and issues are not being actively reviewed. For more details, please see the blog post.


    1. kas_elvirov Автор
      02.11.2022 23:09

      Продукт теперь поддерживает сообщество

      За текущий год было несколько релизов, разработка продукта не стоит на месте

      И напоследок несколько цитат из статьи на которую вы ссылаетесь:

      1. "Frontity Framework will continue to live on as an open source software project, available for free to everyone"

      2. "In order to facilitate the continuity of the project, we are helping transition it to a community-driven endeavor. We believe this is an opportunity to make the project better than we, as a single organization could, by inviting more discussions, driving greater participation, and encouraging the community at large to contribute their particular expertise"

      3. "Like all other open source projects, not only can you keep using the framework, but you can also make contributions to improve it. You can help make improvements by, among other things, fixing bugs, and/or working on the features or packages you want to see implemented"