Laravel Backpack登录后，Sanctum保护VueJS应用遇401问题解决

问题场景 #

项目采用Laravel Backpack（默认Bootstrap+jQuery），可通过默认登录表单正常登录。尝试借助Laravel Sanctum，利用Backpack的登录数据保护VueJS应用，已完成.env、Backpack配置、Kernel中间件、Axios、路由的相关设置，但/sanctum/csrf-cookie请求成功获取CSRF-TOKEN头后，/api/user接口始终返回401未授权。

解决步骤 #

1. 对齐Sanctum与Web守卫的用户提供者 #

打开config/auth.php，确保sanctum守卫的用户提供者与Backpack使用的web守卫一致，这样Sanctum才能识别Backpack的登录会话：

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],
    'sanctum' => [
        'driver' => 'sanctum',
        'provider' => 'users', // 必须和web守卫的provider保持一致
    ],
]

2. 修正SESSION_DOMAIN与SANCTUM_STATEFUL_DOMAINS配置 #

• 带端口的本地环境下，SESSION_DOMAIN需设为.localhost（前缀加.），确保跨端口共享Cookie：

  SESSION_DOMAIN=.localhost
  

• 如果VueJS应用使用独立端口（如3000），需将其添加到SANCTUM_STATEFUL_DOMAINS：

  SANCTUM_STATEFUL_DOMAINS=localhost,127.0.0.1:8000,127.0.0.1:3000
  

3. 确保Axios正确携带CSRF令牌 #

虽然开启了withCredentials，但部分场景下需手动从Cookie中提取XSRF-TOKEN并添加到请求头，修改app.js：

axios.defaults.withCredentials = true;

// 从Cookie中获取XSRF-TOKEN
function getCookie(name) {
    let value = "; " + document.cookie;
    let parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
}

axios.get('/sanctum/csrf-cookie').then(() => {
    axios.get('/api/user', {
        headers: {
            'X-XSRF-TOKEN': getCookie('XSRF-TOKEN')
        }
    }).then(response => {
        console.log(response.data);
    });
});

4. 清除缓存与浏览器Cookie #

• 执行Laravel缓存清理命令：

  php artisan config:clear
  php artisan cache:clear
  

• 清空浏览器所有Cookie，重新登录Backpack后台后再测试/api/user接口。

5. 检查CORS配置 #

打开config/cors.php，确保允许携带凭证并包含前端域名：

'supports_credentials' => true,
'allowed_origins' => ['http://localhost:3000', 'http://localhost:8000'], // 根据实际域名调整

内容的提问来源于stack exchange，提问作者smzapp