Pembangunan Laravel: Bagaimana untuk melaksanakan pengesahan SPA menggunakan Laravel Sanctum?

Pembangunan Laravel: Bagaimana untuk menggunakan Laravel Sanctum untuk melaksanakan pengesahan SPA?

Laravel Sanctum ialah pakej rasmi untuk Laravel, direka untuk menyediakan pengesahan API yang ringkas dan ringan untuk SPA (Aplikasi Halaman Tunggal) dan aplikasi mudah alih. Ia menggunakan token sementara dan bukannya bukti kelayakan kekal untuk keselamatan yang dipertingkatkan dan menyediakan berbilang pemacu pengesahan, termasuk kuki, kunci API dan JWT.

Dalam siaran ini, kita akan membincangkan cara melaksanakan pengesahan SPA menggunakan Laravel Sanctum.

Langkah pertama ialah memasang Laravel Sanctum. Ia boleh dipasang menggunakan Komposer dalam aplikasi Laravel:

composer require laravel/sanctum

Setelah dipasang, migrasi perlu dijalankan untuk mencipta jadual yang diperlukan oleh Sanctum:

php artisan migrate

Seterusnya, anda perlu membuka fail app/Http/Kernel.php dan menambah perisian tengah Laravel Sanctum dalam kumpulan perisian tengah API:

    LaravelSanctumHttpMiddlewareEnsureFrontendRequestsAreStateful::class,
    'throttle:60,1',
    IlluminateRoutingMiddlewareSubstituteBindings::class,
],```

现在，Laravel Sanctum已准备好开始在应用程序中进行SPA身份验证。

下一步是将Sanctum添加到Vue或React应用程序中。为此，需要在应用程序中安装axios或其他HTTP客户端库，以便与后端通信。建议使用axios来演示下面的示例代码。

axios需要配置一下：

import axios daripada 'axios'

eksport const HTTP = axios.create({
baseURL: http://localhost:8000/api/,
withCredentials: true,
})

withCredentials选项允许axios将cookie发送到后端，这对于使用Laravel Sanctum进行身份验证非常重要。

现在，可以在Vue组件或React组件中使用以下代码来进行身份验证：

// Log masuk
log masuk() {

axios.post('/login', this.credentials)
  .then(response => {
    this.getUser()
  })

},

// Log keluar
log keluar() {

axios.post('/logout')
  .then(response => {
    this.$store.commit('logout')
  })

},

// Dapatkan maklumat pengguna
getUser () {

axios.get('/user')
  .then(response => {
    this.$store.commit('updateUser', response.data)
  }).catch(error => {
    console.log(error)
  })

},

在这个例子中，我们使用axios来向/login和/logout路由发送POST请求，以及向/user路由发送GET请求。这三个路由应该在Laravel应用程序中定义，并使用Laravel Sanctum进行身份验证。

使用Laravel Sanctum的默认身份验证驱动程序- cookie-，可以通过以下方式发送令牌：

// Dalam Vue
axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[ name= "csrf-token"]').getAttribute('content');

// In React
import { setAuthToken } daripada './axiosConfig';
axios.defaults.headers .common ['X-CSRF-TOKEN'] = setAuthToken();

这将在每个请求中设置名为X-CSRF-TOKEN的标头。此标头包含一个CSRF令牌，该令牌是在使用Laravel Sanctum时进行身份验证所必需的。

Atas ialah kandungan terperinci Pembangunan Laravel: Bagaimana untuk melaksanakan pengesahan SPA menggunakan Laravel Sanctum?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!