Laravel Vue SPA 使用 Sanctum 响应未经授权答案

【问题标题】：Laravel Vue SPA using Sanctum response UnauthorizedLaravel Vue SPA 使用 Sanctum 响应未经授权
【发布时间】：2023-03-21 16:56:01
【问题描述】：

我本地机器上的 Sanctum Auth 系统运行良好，我没有任何错误。但是我部署的应用程序在授权用户时遇到了问题。当我登录时，它会发送一个请求以获取用户数据，然后重定向。身份验证完成后，您将被重定向，并且应用程序会发出 GET 请求以获取更多数据。此 GET 路由使用 laravel sanctum 进行保护。但是后端没有注册用户已成功登录尝试，因此它发送 401 Unauthorized 错误。这是一些代码...

来自 store.js 的 loadUser 操作

actions: {
    async loadUser({ commit, dispatch }) {
        if (isLoggedIn()) {
            try {
                const user = (await Axios.get('/user')).data;
                commit('setUser', user);
                commit('setLoggedIn', true);
            } catch (error) {
                dispatch('logout');
            }
        }
    },
}

routs.js 上的 Route Guard 检查 isLoggedIn（这只是本地布尔存储）

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
    // if (to.meta.requiresAuth) {
        if (isLoggedIn()) {
            next();
        } else {
            next({
                name: 'home'
            });
        }
    } else {
        next();
    }
})

有人指出我忘记了 bootstrap.js 中 axios 的 withCredetials 设置。我做了这个添加，但我的问题仍然存在。

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.withCredentials = true;

在服务器端路由中间件保护（这是拒绝请求的地方）

Route::middleware('auth:sanctum')->group(function () {
    Route::apiResource('trucks', 'Api\TruckController');
});

在 laravel cors.php 配置文件中，我将“supports_credentials”从 false 更改为 true

'supports_credentials' => true,

在我看来，cookie 信息并没有通过 api 调用（但我真的不确定）。此设置在我的本地计算机上运行，但在我部署到的服务器上运行。

【问题讨论】：

标签： laravel vue.js single-page-application laravel-sanctum

【解决方案1】：

需要在 .env 文件中为SANCTUM_STATEFUL_DOMAINS 添加一个环境变量，并使其与域名相同。

在 laravel sanctum.php 配置文件中...

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost,127.0.0.1')),

【讨论】：