Сессии

Добавлено в: astro@5.7.0

Сессии используются для обмена данными между запросами на страницах, рендерящихся по запросу (on-demand rendering).

В отличие от кук (cookies), данные сессий хранятся на сервере. Это позволяет хранить большие объемы данных, не беспокоясь об ограничениях размера или безопасности. Сессии удобны для хранения данных пользователя, содержимого корзины или состояния форм, и они работают без JavaScript на стороне клиента.

src/components/CartButton.astro

---
export const prerender = false;
const cart = await Astro.session?.get('cart');
---

<a href="/checkout">🛒 {cart?.length ?? 0} товаров</a>

Настройка сессий

Для работы сессий требуется драйвер хранилища. Адаптеры Node, Cloudflare и Netlify настраивают стандартный драйвер автоматически. Для других адаптеров может потребоваться указать драйвер вручную.

astro.config.mjs

{
  adapter: vercel(),
  session: {
    driver: "redis",
  },
}

См. справочник по настройке сессий для получения подробностей.

Работа с данными сессии

Объект session позволяет управлять состоянием пользователя и ID сессии. Он доступен как Astro.session в компонентах и страницах Astro, и как context.session в эндпойнтах, мидлварах и действиях.

Сессия создается автоматически при первом использовании. Её можно обновить с помощью session.regenerate() или удалить через session.destroy().

В большинстве случаев вам понадобятся только методы session.get() и session.set().

Использование в компонентах

src/components/CartButton.astro

---
export const prerender = false;
const cart = await Astro.session?.get('cart');
---
<a href="/checkout">🛒 {cart?.length ?? 0} товаров</a>

Использование в API эндпойнтах

src/pages/api/addToCart.ts

export async function POST(context: APIContext) {
  const cart = await context.session?.get('cart') || [];
  const data = await context.request.json();

  cart.push(data.item);
  await context.session?.set('cart', cart);

  return Response.json(cart);
}

Типизация данных сессии

По умолчанию данные сессии не типизированы. Вы можете добавить типы в файле src/env.d.ts, описав интерфейс App.SessionData:

src/env.d.ts

declare namespace App {
  interface SessionData {
    user: { id: string; name: string };
    cart: string[];
  }
}

Это обеспечит автодополнение и проверку типов при использовании Astro.session.get().