本文详解 laravel sanctum 在同域 vue 前端（内嵌于 blade）场景下如何正确结合 csrf 保护与会话认证，澄清 csrf token 仅用于表单提交等传统请求，而 api 调用需依赖 sanctum 的 token 认证机制，并提供可落地的 axios 配置与 blade 初始化方案。
本文详解 laravel sanctum 在同域 vue 前端（内嵌于 blade）场景下如何正确结合 csrf 保护与会话认证，澄清 csrf token 仅用于表单提交等传统请求，而 api 调用需依赖 sanctum 的 token 认证机制，并提供可落地的 axios 配置与 blade 初始化方案。
在 Laravel + Sanctum + 内嵌 Vue 的典型单页应用架构中，一个常见误区是混淆 CSRF 保护与用户认证：CSRF Token 不用于“登录”或“验证用户身份”，而是防止跨站请求伪造；真正的会话认证由 Sanctum 的 web 中间件驱动的 Session + Cookie 完成。 你当前的逻辑（在 Blade 中通过 Auth::check() 判断登录态）完全可行且推荐——前提是 Sanctum 已正确配置为支持「Web 会话认证」（而非仅 API Token 模式）。
✅ 正确配置前提
确保 config/sanctum.php 中启用 Web 会话支持：
'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost,127.0.0.1,::1')),
并在 .env 中设置：
SANCTUM_STATEFUL_DOMAINS=localhost,127.0.0.1
同时确认 app/Http/Kernel.php 中 api 中间件组未包含 VerifyCsrfToken::class（CSRF 验证应仅作用于 web 组），而你的登录接口路由必须使用 web 中间件（非 api）：
// routes/web.php
Route::post('/login', [LoginController::class, 'login'])->middleware('web');
✅ 前端初始化关键三步
-
预取 CSRF Cookie（必需）
在应用启动时（如 app.js 或入口组件）调用：axios.get('/sanctum/csrf-cookie').then(() => { // CSRF cookie 已设置，后续请求将自动携带 }); -
全局 Axios 配置（核心）
启用凭据传递，使浏览器自动发送 XSRF-TOKEN 和会话 Cookie：import axios from 'axios'; window.axios = axios; window.axios.defaults.withCredentials = true; // ⚠️ 关键！允许跨域/同域携带 Cookie window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
-
Blade 中安全注入用户状态
你的原始 Blade 逻辑正确，但建议优化为 JSON 序列化以避免 XSS 风险：<script> window.userAuthData = @json([ 'isLoggedin' => auth()->check(), 'user' => auth()->check() ? [ 'id' => auth()->id(), 'name' => auth()->user()->name, 'email' => auth()->user()->email, ] : null, ]); </script>此后 Vue 组件可直接读取 window.userAuthData，无需额外 API 请求。
⚠️ 注意事项与常见陷阱
- 不要在 api 路由中验证 CSRF：VerifyCsrfToken 中间件应仅应用于 web 中间件组。API 路由（如 /api/*）默认跳过 CSRF，依赖 Sanctum Token 认证。
-
登录控制器无需手动创建 Token：你当前的 createToken() 调用适用于 SPA Token 认证模式，但若走 Session 认证（即 Auth::attempt()），则应移除该逻辑，改用标准会话登录：
public function login(AuthRequest $request) { if (Auth::attempt($request->validated())) { return response()->json(['message' => 'Logged in']); } return response()->json(['error' => 'Invalid credentials'], 422); } -
CORS 配置：若前端域名与后端不同（如 http://vue-app.test vs http://api.test），需在 cors.php 中明确允许凭据：
'supports_credentials' => true, 'allowed_origins' => ['http://vue-app.test'],
✅ 总结
Sanctum 的「Web 会话认证」模式本质是 Laravel 原生 Session + CSRF 保护的增强版，而非替代品。你的目标——在 Blade 中判断登录态、Vue 中复用该状态——完全可实现，关键在于：统一使用 web 中间件、启用 withCredentials、预取 CSRF Cookie、避免在 API 路由中混用 Session 认证逻辑。 这样既保障安全性，又保持开发体验简洁高效。
