Nuxt 3 + Laravel Sanctum: Просте та надійне рішення для автентифікації вашого SPA та API

У сучасній веб-розробці автентифікація є важливим елементом для захисту додатків і даних користувачів. Модуль nuxt-sanctum-authentication забезпечує зручний міст між Nuxt 3 і Laravel Sanctum, пропонуючи ефективний спосіб управління як SPA (односторінковими додатками), так і API на основі токенів. Цей модуль спростить інтеграцію, керуючи такими складними процесами, як захист від CSRF, керування токенами Bearer та підтримка SSR (серверного рендерингу) і CSR (клієнтського рендерингу). Якщо ви створюєте Nuxt-додаток, який потребує захищеного входу, або проект на базі API, цей модуль надає безпроблемне рішення для забезпечення безпеки вашої програми.

Перед початком налаштування автентифікації ознайомтесь із цими важливими ресурсами:

• Репозиторій модуля: nuxt-sanctum-authentication
• Документація: Документація Nuxt Sanctum Authentication
• Демонстраційний репозиторій: nuxt-sanctum-authentication-demo

# Налаштування Laravel Sanctum з Nuxt 3

# Крок 1: Встановлення модуля nuxt-sanctum-authentication

Щоб спростити інтеграцію між Nuxt 3 і Laravel Sanctum, використайте модуль nuxt-sanctum-authentication. Він бере на себе управління складнощами автентифікації для SPA і API, включаючи керування токенами CSRF і Bearer.

Для початку встановіть пакет у вашому Nuxt 3 додатку:

npm install @qirolab/nuxt-sanctum-authentication

# Крок 2: Налаштування nuxt.config.ts

Після встановлення додайте модуль до вашого nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["@qirolab/nuxt-sanctum-authentication"],
});

Також необхідно вказати apiUrl для вашої Laravel програми:

export default defineNuxtConfig({
  modules: ["@qirolab/nuxt-sanctum-authentication"],
  sanctum: {
    apiUrl: "http://api.yourapp.test",  // Змініть на URL вашого Laravel API
  },
});

# Крок 3: Налаштування функції входу

У вашому Nuxt 3 додатку потрібно створити сторінку входу, де користувачі зможуть ввести свої облікові дані. Використовуйте useSanctum() для обробки запитів на вхід. Ось приклад реалізації:

<script setup lang="ts">
const form = ref({
  email: '',
  password: ''
});
 
const { login } = useSanctum();
 
const submitForm = async () => {
  await login(form.value);
};
</script>
 
<template>
  <form @submit.prevent="submitForm">
    <input v-model="form.email" type="email" placeholder="Email" />
    <input v-model="form.password" type="password" placeholder="Password" />
    <button type="submit">Вхід</button>
  </form>
</template>

Ця проста форма входу надсилає облікові дані користувача на сервер через кінцеву точку входу Sanctum, забезпечуючи безпеку за допомогою токенів CSRF.

# Вибір між SPA та API Токеном

Залежно від вимог вашого додатка ви можете налаштувати SPA або API токен автентифікацію. За замовчуванням модуль використовує автентифікацію на основі cookie для SPA. Щоб перемкнутися на API токен автентифікацію, просто оновіть authMode у nuxt.config.ts:

sanctum: {
  apiUrl: "http://api.yourapp.test",
  authMode: "token",  // Перемикаємося на токенову автентифікацію
}

# Вирішення проблем із CORS

Типовою проблемою при налаштуванні міждоменної автентифікації між Nuxt-додатком і Laravel API є помилки CORS (Cross-Origin Resource Sharing). Щоб виправити це, змініть файл config/cors.php у Laravel:

'paths' => ['api/*', 'sanctum/csrf-cookie', '/login'],

Переконайтеся, що точка входу для логіну додана до масиву paths для дозволу запитів CORS.

# Тестування вашого налаштування

Після завершення всіх налаштувань перейдіть на сторінку входу у браузері. Відкрийте вкладку «Мережа» у інструментах розробника для перевірки запиту на вхід. Якщо всі налаштування правильні, ви повинні побачити успішну відповідь без помилок CORS.

# Забезпечення безпеки вашого додатку

Поєднання Nuxt 3 і Laravel Sanctum забезпечує потужне й гнучке рішення для автентифікації, яке легко реалізувати. Незалежно від того, чи створюєте ви SPA з автентифікацією на основі cookie, чи API з токеновою автентифікацією, ця конфігурація гарантує захист і продуктивність вашого додатку.

# Чому варто використовувати nuxt-sanctum-authentication?

Використання модуля nuxt-sanctum-authentication спрощує весь процес автентифікації між Nuxt 3 і Laravel Sanctum. Він справляється з управлінням токенами CSRF, токенами Bearer і працює без зусиль у режимах SSR і CSR.

# Висновок

Забезпечення безпеки вашого Nuxt 3 додатку за допомогою Laravel Sanctum не є складним. Використовуючи модуль nuxt-sanctum-authentication, ви можете швидко реалізувати як SPA, так і токенову автентифікацію, пропонуючи надійне рішення для безпеки вашої програми. Дотримуйтесь цього покрокового посібника, щоб швидко налаштувати безпечний процес автентифікації для ваших користувачів.