Développement Laravel : Comment implémenter l'authentification SPA à l'aide de Laravel Sanctum ?

Développement Laravel : Comment implémenter l'authentification SPA à l'aide de Laravel Sanctum ?

Laravel Sanctum est un package officiel pour Laravel conçu pour fournir une authentification API simple et légère pour SPA (Single Page Application) et les applications mobiles. Il utilise des jetons éphémères au lieu d'informations d'identification permanentes pour une sécurité renforcée et fournit plusieurs pilotes d'authentification, notamment des cookies, des clés API et JWT.

Dans cet article, nous verrons comment implémenter l'authentification SPA à l'aide de Laravel Sanctum.

La première étape consiste à installer Laravel Sanctum. Il peut être installé à l'aide de Composer dans une application Laravel :

composer require laravel/sanctum composer require laravel/sanctum

安装后，需要运行migrations以创建Sanctum所需的表：

php artisan migrate

接下来，需要打开app/Http/Kernel.php文件，并在API中间件组中添加Laravel Sanctum的中间件：

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

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

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

axios需要配置一下：

import axios from 'axios'

export const HTTP = axios.create({
baseURL: http://localhost:8000/api/
Après l'installation, vous devez exécuter des migrations pour créer les tables requises par Sanctum :

php artisan migrate<p><br>Ensuite, vous devez ouvrir le fichier app/Http/Kernel.php et ajouter le middleware Laravel Sanctum dans le groupe middleware API : </p><pre class='brush:php;toolbar:false;'> withCredentials选项允许axios将cookie发送到后端，这对于使用Laravel Sanctum进行身份验证非常重要。 现在，可以在Vue组件或React组件中使用以下代码来进行身份验证： </pre><p>import axios from 'axios'</p> <p>export const HTTP = axios . create({<br> baseURL : <code>http://localhost:8000/api/,

withCredentials : true,

})

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

// Login
login() {

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

},

// Se déconnecter
logout() {

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

},

// Obtenir des informations sur l'utilisateur

getUser() {🎜

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

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

🎜},🎜

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

🎜// Dans Vue 🎜axios.defaults.headers.common['X -CSRF -TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');🎜🎜// Dans React🎜import { setAuthToken } from './axiosConfig'; 🎜axios .defaults.headers.common['X-CSRF-TOKEN'] = setAuthToken();🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!