Pengesahan Sanctum Nuxt 3 Laravel: Selamat spa dan API anda dengan mudah

Pengesahan yang teguh adalah yang paling penting dalam pembangunan web moden untuk melindungi data pengguna dan integriti aplikasi. Modul

menyediakan integrasi yang lancar antara NUXT 3 dan Laravel Sanctum, memudahkan kerumitan kedua-dua aplikasi satu halaman (SPA) dan pengesahan berasaskan token API. Modul ini dengan cekap mengendalikan tugas-tugas seperti perlindungan CSRF, pengurusan token pembawa, dan menyokong kedua-dua penyampaian pelayan (SSR) dan penyampaian klien (CSR). Sama ada anda membina sistem log masuk yang selamat atau projek yang didorong oleh API, modul ini menawarkan penyelesaian mudah. ​​nuxt-sanctum-authentication

Sebelum meneruskan, meneroka sumber -sumber yang berguna ini:

• Repositori modul: nuxt-sanctum-authentication
• Dokumentasi: dokumentasi pengesahan sanctum nuxt
• repositori demo: nuxt-sanctum-authentication-demo

Mengintegrasikan Sanctum Laravel dengan NUXT 3

Memasang modul

nuxt-sanctum-authentication

modul

menyelaraskan integrasi antara NUXT 3 dan Laravel sanctum, menguruskan selok -belok spa dan pengesahan API, termasuk pengendalian token CSRF dan token pembawa. nuxt-sanctum-authentication

Pasang pakej dalam aplikasi NUXT 3 anda:

npm install @qirolab/nuxt-sanctum-authentication

Mengkonfigurasi

nuxt.config.ts

selepas pemasangan, tambahkan modul ke

: nuxt.config.ts anda

export default defineNuxtConfig({
  modules: ["@qirolab/nuxt-sanctum-authentication"],
  sanctum: {
    apiUrl: "http://api.yourapp.test",  // Replace with your Laravel API URL
  },
});

Konfigurasi ini menentukan URL API untuk aplikasi Laravel anda.

Melaksanakan fungsi log masuk

Buat halaman log masuk dalam aplikasi NUXT 3 anda di mana pengguna memasukkan kelayakan mereka. Gunakan

yang boleh dikomposisikan untuk menguruskan permintaan log masuk. Contoh asas: useSanctum()

<template>
  <form>
    <input v-model="form.email" type="email" placeholder="Email">
    <input v-model="form.password" type="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>
</template>

Borang ini mengemukakan kelayakan pengguna ke backend melalui titik akhir log masuk Sanctum, memastikan komunikasi yang selamat menggunakan token CSRF.

Spa vs API Token Authentication

Modul mungkir ke pengesahan spa berasaskan cookie. Untuk Pengesahan Token API, ubah

dalam authMode: nuxt.config.ts

sanctum: {
  apiUrl: "http://api.yourapp.test",
  authMode: "token",  // Enables token-based authentication
}

menyelesaikan masalah CORS

Kesilapan Perkongsian Sumber Sumber Cross-Origin (CORS) adalah perkara biasa apabila menubuhkan pengesahan silang asal. Laraskan laravel anda

: config/cors.php

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

Sertakan titik akhir log masuk dalam array

untuk membolehkan permintaan CORS. paths

Ujian dan Keselamatan

Selepas konfigurasi, uji halaman log masuk anda. Periksa permintaan log masuk dalam alat pemaju penyemak imbas anda (Tab Rangkaian). Sambutan yang berjaya tanpa kesilapan CORS menunjukkan konfigurasi yang betul. Gabungan NUXT 3 dan Laravel Sanctum menyediakan penyelesaian pengesahan yang mantap dan mudah dilaksanakan untuk kedua -dua spa dan API.

Manfaat nuxt-sanctum-authentication

Modul ini memudahkan pengesahan antara NUXT 3 dan Laravel sanctum dengan mengendalikan token CSRF, token pembawa, dan dengan lancar menyokong SSR dan CSR.

Kesimpulan

Mengamankan aplikasi NUXT 3 anda dengan Sanctum Laravel dipermudahkan dengan modul

. Panduan ini menyediakan jalan yang jelas untuk melaksanakan pengesahan yang selamat dan cekap untuk pengguna anda. nuxt-sanctum-authentication

Atas ialah kandungan terperinci Pengesahan Sanctum Nuxt 3 Laravel: Selamat spa dan API anda dengan mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!