Nuxt 3 Minimal Starter

Look at the Nuxt 3 documentation to learn more.

Setup

Make sure to install the dependencies:

# bun
bun install

Development Server

Start the development server on

:

# bun
bun run dev

Production

Build the application for production:

# bun
bun run build

Locally preview production build:

# bun
bun run preview

Check out the deployment documentation for more information.

Запуск с окружением в режиме разработки

Запуск с локальным окружением

bun run dev --dotenv .env.local

Запуск с продакшн окружением

bun run dev --dotenv .env.production

Сборка с окружением

Сборка с локальным окружением

bun run build --dotenv .env.local

Сборка с продакшн окружением

bun run build --dotenv .env.production

Реализовать авторизацию по необходимости:

Для реализации авторизации через cookie в Nuxt 3 можно использовать middleware или плагины, чтобы избежать повторения кода в каждом запросе. Рассмотрим оба подхода:

1. Использование middleware

Middleware позволяет выполнять код до рендеринга страницы или компонента. Это удобно для проверки аутентификации перед загрузкой страницы.

Шаги:

1. Создайте middleware: Создадим файл middleware/auth.js:

export default defineNuxtRouteMiddleware((to, from) => {
  // Получаем значение куки
  const token = useCookies().get('token');

  if (!token) {
    return navigateTo('/login'); // Если токен отсутствует, перенаправляем на страницу логина
  }
});

2. Примените middleware к нужным страницам: В файле .vue, где нужно проверять аутентификацию, добавьте middleware:

<script setup>
  const dayjs = useDayjs();
  definePageMeta({
    middleware: "auth",
  });
</script>

<template>
  <!-- Ваш контент -->
</template>

Теперь при переходе на любую страницу, которая использует этот middleware, будет проверяться наличие токена в куках. Если токен отсутствует, пользователь будет перенаправлен на страницу входа.

2. Использование плагинов

Плагины позволяют глобально применять функционал ко всему приложению.

Шаги:

1. Создайте плагин: Создаем файл plugins/auth.js:

export default defineNuxtPlugin(() => {
  const router = useRouter();
  const cookies = useCookies();

  router.beforeEach((to, from, next) => {
    const token = cookies.get("token");

    if (to.meta.requiresAuth && !token) {
      return router.push("/login");
    }

    next(); // Продолжить переход
  });
});

2. Зарегистрируйте плагин: Добавьте плагин в nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  plugins: ['~/plugins/auth'],
});

3. Добавьте метатег requiresAuth к нужным страницам: Для тех страниц, где требуется проверка аутентификации, добавьте метатег requiresAuth:

<script setup>
  const dayjs = useDayjs();
  definePageMeta({
    requiresAuth: true,
  });
</script>

<template>
  <!-- Ваш контент -->
</template>

Таким образом, все страницы с метатегом requiresAuth будут автоматически проверять наличие токена в куке, и если он отсутствует, пользователь будет перенаправлен на страницу входа.

Оба способа помогут вам централизовать проверку аутентификации и избежать дублирования кода в каждом запросе.

В Nuxt 3 вы можете использовать useRequestOptionsFactory для настройки параметров запросов, включая добавление заголовков cookie. Это позволит вам автоматизировать процесс добавления нужных заголовков к каждому запросу через useFetch.

Так же можно реализовать добавление cookie автоматически в каждом запросе на бэкэнд:

1. Создайте конфигурационный файл для useRequestOptionsFactory:

   Создайте файл app/plugins/request-options-factory.js со следующим содержимым:

import { useCookieStorage } from '#imports';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:fetch', async () => {
    const optionsFactory = useRequestOptionsFactory();

    optionsFactory.setDefaults((config) => {
      config.headers = {
        ...config.headers,
        cookie: useCookieStorage().get('token') || '',
      };

      return config;
    });
  });
});

2. Зарегистрируйте плагин в nuxt.config.ts:

   Убедитесь, что ваш плагин зарегистрирован в конфигурации Nuxt:

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  plugins: [
    { src: '~/app/plugins/request-options-factory' },
  ],
});

3. Используйте useFetch в ваших компонентах:

   Теперь каждый вызов useFetch будет автоматически включать заголовок cookie с вашим токеном:

<script setup>
  const dayjs = useDayjs();
    const { data, pending, error, refresh } = await useFetch('/api/data');
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else-if="error">An error occurred.</div>
  <div v-else>{{ data }}</div>
</template>

Этот подход гарантирует, что каждый запрос, сделанный через useFetch, будет содержать необходимые заголовки без необходимости вручную их указывать в каждом компоненте.