Laravel 中基于 Vue cookie 的身份验证

Posted 2023-03-14

【中文标题】Laravel 中基于 Vue cookie 的身份验证

【英文标题】：Vue cookie-based authentication in Laravel

【发布时间】：2021-05-26 00:11:32

【问题描述】：

通过阅读 Laravel 文档，似乎在使用 Sanctum Vue 时只会使用基于 cookie 的身份验证。

我试图将现有应用程序（使用 Livewire 完成登录）移动到 Vue，但直接对我的第一个 api 端点的调用被重定向到登录页面。

所以我创建了一个全新的 Larvel 安装，安装了 Breeze（使用 Inertia），然后是 Sanctum，发布了配置等。

但是当我登录然后访问我的测试端点（仅返回 200 Ok）时，它会重定向到登录页面（因为我已登录，所以会重定向到 Breeze 仪表板）。

我是否需要为由auth:sanctum 保护的端点手动执行任何操作才能通过身份验证？

更新

我设置了axios.defaults.withCredentials，它正在返回401 Unauthorized。我的 app.js：

axios.defaults.withCredentials = true;
axios.get('/api/test')
    .then(function (response) 
        // handle success
        console.log(response);
    )
    .catch(function (error) 
        // handle error
        console.log(error);
    )
    .then(function () 
        // always executed
    );

【问题讨论】：

如果你使用 axios，你应该在你的 axios 实例axios.defaults.withCredentials = true; 上启用 withCredentials 选项。

谢谢@porloscerrosΨ - 我会试试看。我试图在我的浏览器中直接加载 api。

哦，好的。不知道浏览器能不能直接处理sanctum cookie。你必须先得到圣所饼干。然后在 X-XSRF-TOKEN 标头上发送 cookie。如果你使用邮递员，here 是一个聪明的实现

设置 withCredentials 无效。我会看你链接的教程。

实际上，withCredentials 确实有效！我将其更改为尝试开箱即用的/user 端点，它使用auth:api 而不是auth:sanctum。 @porloscerrosΨ 谢谢，将其添加为答案，我会接受它

【参考方案1】：

首先确保您的应用程序的 CORS 配置返回值为 True 的 Access-Control-Allow-Credentials 标头。这可以通过将应用程序的config/cors.php 配置文件中的supports_credentials 选项设置为true 来实现。

然后，如果您使用的是 axios，您应该在您的 axios 实例上启用 withCredentials 选项：

axios.get('some api url', withCredentials: true);

或全局：

axios.defaults.withCredentials = true;

如果您不使用 Axios 从您的前端发出 HTTP 请求，您应该在自己的 HTTP client 上执行等效配置。

Laravel 文档Reference.

---

如果您使用 Postman 来测试您的 api，here 是 sanctum 身份验证请求的智能实现。基本上你必须先得到 sanctum cookie，然后在XSRF-TOKEN header 上发送 cookie。