Cookies плагин

Библиотека Quasar предоставляет удобный и гибкий способ работы с cookies через встроенный плагин Cookies. Этот инструмент позволяет безопасно сохранять данные на стороне клиента, управлять сроком жизни cookie и поддерживать работу как на клиентской, так и на серверной части (SSR).

Подключение плагина Cookies

Плагин доступен через объект this.$q.cookies в компонентах Vue или через импорт из quasar в любом модуле:

import { Cookies } from 'quasar';

После этого можно обращаться к методам для чтения, записи и удаления cookie.

Основные методы

set(key, value, options)

Метод используется для сохранения cookie.

  • key — имя cookie.
  • value — значение cookie; может быть строкой, числом или объектом (объект автоматически сериализуется в JSON).
  • options — объект с настройками cookie.

Пример:

Cookies.set('user', { name: 'Ivan', role: 'admin' }, { 
  path: '/', 
  maxAge: 3600, 
  secure: true 
});

Ключевые параметры options:

  • path — путь, на котором cookie доступна. По умолчанию '/'.
  • domain — домен cookie. Если не указан, cookie привязана к текущему домену.
  • secure — флаг безопасности; cookie передается только по HTTPS.
  • httpOnly — доступно только на сервере (SSR), недоступно через JavaScript.
  • sameSite — политика ограничения передачи cookie ('Lax', 'Strict', 'None').
  • maxAge — срок жизни cookie в секундах.
  • expires — дата истечения срока действия в формате Date. Если указан, имеет приоритет над maxAge.

get(key)

Возвращает значение cookie по имени. Если cookie не существует, возвращает undefined.

const user = Cookies.get('user'); // { name: 'Ivan', role: 'admin' }

Для работы с JSON значениями автоматически выполняется десериализация.

has(key)

Проверяет существование cookie с указанным именем. Возвращает true или false.

if (Cookies.has('user')) {
  console.log('Cookie существует');
}

remove(key, options)

Удаляет cookie по имени. Для корректного удаления важно указать path и domain, если они были заданы при установке.

Cookies.remove('user', { path: '/' });

getAll()

Возвращает объект со всеми доступными cookie:

const allCookies = Cookies.getAll();
console.log(allCookies);
// { user: { name: 'Ivan', role: 'admin' }, theme: 'dark' }

Использование с SSR

При серверном рендеринге (Nuxt.js, Quasar SSR) необходимо передавать cookies через заголовки запроса, чтобы плагин корректно работал на сервере:

export default function ({ req }) {
  if (process.server) {
    const userCookie = Cookies.parseSSR(req.headers.cookie || '');
    console.log(userCookie);
  }
}

Метод parseSSR позволяет извлекать cookie из заголовка cookie и преобразовывать их в объект.

Работа с JSON-объектами

Cookies Quasar автоматически сериализуют объекты в JSON при записи и десериализуют при чтении.

Cookies.set('settings', { theme: 'dark', fontSize: 14 });
const settings = Cookies.get('settings'); // { theme: 'dark', fontSize: 14 }

Это удобно для хранения структурированных данных без необходимости самостоятельно вызывать JSON.stringify или JSON.parse.

Практические рекомендации

  • Всегда указывайте path и domain для cookie, если требуется их доступность на нескольких страницах или поддоменах.
  • Для данных, которые не должны быть доступны через JavaScript, используйте httpOnly (только серверная обработка).
  • Для безопасности на HTTPS включайте secure и sameSite: 'Lax' или 'Strict'.
  • Ограничивайте срок жизни cookie через maxAge или expires для предотвращения накопления устаревших данных.

Примеры сложного использования

  1. Хранение токена авторизации с ограничением по времени:
Cookies.set('auth_token', token, { 
  path: '/', 
  secure: true, 
  sameSite: 'Strict', 
  maxAge: 1800 
});
  1. Удаление cookie при выходе пользователя:
function logout() {
  Cookies.remove('auth_token', { path: '/' });
  Cookies.remove('user', { path: '/' });
}
  1. Получение нескольких значений для настройки интерфейса:
const theme = Cookies.get('theme') || 'light';
const language = Cookies.get('lang') || 'en';

Плагин Cookies в Quasar обеспечивает удобный и безопасный механизм хранения клиентских данных, совместимый с SSR, с полной поддержкой опций безопасности, сериализации JSON и управления сроком жизни. Это делает его универсальным инструментом для работы с cookie в современных приложениях на Vue.js.

Оглавление