Heim >PHP-Framework >Laravel >Laravel-Entwicklung: Wie implementiert man die SPA-Authentifizierung mit Laravel Sanctum?

Laravel-Entwicklung: Wie implementiert man die SPA-Authentifizierung mit Laravel Sanctum?

王林
王林Original
2023-06-15 23:28:132178Durchsuche

Laravel-Entwicklung: Wie implementiert man die SPA-Authentifizierung mit Laravel Sanctum?

Laravel Sanctum ist ein offizielles Paket für Laravel, das eine einfache, leichte API-Authentifizierung für SPA (Single Page Application) und mobile Anwendungen bietet. Es verwendet flüchtige Token anstelle permanenter Anmeldeinformationen für mehr Sicherheit und bietet mehrere Authentifizierungstreiber, einschließlich Cookies, API-Schlüssel und JWT.

In diesem Artikel besprechen wir, wie man die SPA-Authentifizierung mit Laravel Sanctum implementiert.

Der erste Schritt besteht darin, Laravel Sanctum zu installieren. Es kann mit Composer in Ihrer Laravel-Anwendung installiert werden:

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/
Nach der Installation müssen Sie Migrationen ausführen, um die von Sanctum benötigten Tabellen zu erstellen:

php artisan migrieren<p><br>Als nächstes müssen Sie die Datei app/Http/Kernel.php öffnen und die Laravel Sanctum-Middleware zur API-Middleware-Gruppe hinzufügen: </p><pre class='brush:php;toolbar:false;'> withCredentials选项允许axios将cookie发送到后端,这对于使用Laravel Sanctum进行身份验证非常重要。 现在,可以在Vue组件或React组件中使用以下代码来进行身份验证: </pre><p>axios aus 'axios' importieren</p> <p>const HTTP = axios exportieren . 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')
  })

},

// Abmelden
logout() {

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

},

// Benutzerinformationen abrufen

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

使用Laravel Sanctum的默认身份验证驱动程序- cookie-,可以通过以下方式发送令牌:
🎜},🎜
这将在每个请求中设置名为X-CSRF-TOKEN的标头。此标头包含一个CSRF令牌,该令牌是在使用Laravel Sanctum时进行身份验证所必需的。
🎜// In Vue 🎜axios.defaults.headers.common['X -CSRF -TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');🎜🎜// In React🎜import { setAuthToken } from './axiosConfig'; 🎜axios .defaults.headers.common['X-CSRF-TOKEN'] = setAuthToken();🎜rrreee

Das obige ist der detaillierte Inhalt vonLaravel-Entwicklung: Wie implementiert man die SPA-Authentifizierung mit Laravel Sanctum?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn