Laravel development: How to implement SPA authentication using Laravel Sanctum?

Laravel Development: How to implement SPA authentication using Laravel Sanctum?

Laravel Sanctum is the official package for Laravel, designed to provide simple, lightweight API authentication for SPA (Single Page Application) and mobile applications. It uses ephemeral tokens instead of permanent credentials for enhanced security and provides multiple authentication drivers, including cookies, API keys, and JWT.

In this article, we will discuss how to implement SPA authentication using Laravel Sanctum.

The first step is to install Laravel Sanctum. It can be installed using Composer in your Laravel application:

composer require laravel/sanctum

After installation, you need to run migrations to create the tables required by Sanctum:

php artisan migrate

Next, you need to open the app/Http/Kernel.php file and add the Laravel Sanctum middleware in the API middleware group:

    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/,
withCredentials: true,
})

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

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

// Login
login() {

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

},

// Logout
logout() {

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

},

// Get user information
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-，可以通过以下方式发送令牌：

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

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

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

The above is the detailed content of Laravel development: How to implement SPA authentication using Laravel Sanctum?. For more information, please follow other related articles on the PHP Chinese website!