Laravel Sanctum 401 错误：原因、解决方法和常见问题解答

2024-03-22 23:30:23

Laravel Sanctum 中的 401 未授权错误：深入解析与解决方法

问题

在将 Laravel Sanctum 与 Vuejs 单页面应用程序 (SPA) 集成时，授权失败是一个常见问题，表现为返回 401 未授权错误。本文将深入探讨导致此错误的原因，并提供一系列步骤来解决它。

解决步骤

1. CORS 配置

确保你的 .env 文件中设置了 SANCTUM_STATEFUL_DOMAINS，包含 SPA 的域名：

SANCTUM_STATEFUL_DOMAINS=app-spa.demo.localhost

2. CSRF 令牌

在 Vuejs 的 Axios 配置中，启用 withCredentials 选项并设置 CSRF 令牌：

// 在 VueJS 中
import axios from 'axios';

axios.defaults.withCredentials = true;
axios.defaults.xsrfCookieName = 'XSRF-TOKEN';
axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN';

3. 路由保护

在 Laravel 的 Api.php 路由文件中，添加 auth:sanctum 中间件以保护需要授权的端点：

Route::middleware(['auth:sanctum'])->group(function () {
    // 受保护的路由
});

4. Cookie 共享

确保 Laravel 和 SPA 都在使用相同的顶级域，并在 Laravel 的 .env 文件中设置 SESSION_DOMAIN：

SESSION_DOMAIN=.demo.localhost

其他相关配置

1. CORS 配置

在 Laravel 的 cors.php 配置文件中，允许来自 SPA 域的跨域请求：

'allowed_origins' => ['*'],
'supports_credentials' => true,

2. 代码示例

以下代码段演示了如何设置 Axios 以使用 CSRF 令牌：

// 在 VueJS 中
import axios from 'axios';

axios.defaults.withCredentials = true;
axios.defaults.xsrfCookieName = 'XSRF-TOKEN';
axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN';