Laravel 9 Sanctum 正确实现用户登出（Logout）的完整教程-php教程-PHP中文网

Laravel 9 Sanctum 正确实现用户登出（Logout）的完整教程

本文详解 laravel 9 + sanctum 前后端分离场景下登出失败（401 unauthorized）的根本原因，并提供符合官方规范、安全可靠的登出实现方案，涵盖后端逻辑修正、前端请求优化及中间件配置要点。

本文详解 laravel 9 + sanctum 前后端分离场景下登出失败（401 unauthorized）的根本原因，并提供符合官方规范、安全可靠的登出实现方案，涵盖后端逻辑修正、前端请求优化及中间件配置要点。

在使用 Laravel 9 配合 Sanctum 构建 SPA（如 React 前端）时，常见错误是：登录成功后能正常访问 /api/user，但调用 /api/logout 却返回 401 Unauthenticated。问题根源往往不在 CORS 或 Token 传递本身，而在于登出逻辑违背了 Sanctum 的认证模型。

❌ 错误写法分析：为什么你的 `logout()` 报 401？

你当前的控制器方法存在两个关键问题：

public function logout(Request $request){
    Auth::attempt([ // ← 错误起点！
        'email'=>$request->email,
        'password'=>$request->password
    ]);
    Auth::user()->token()->delete(); // ← 此行执行前 Auth::user() 已为 null
    return response(['message'=>'Successfully Logging out']);
}

Auth::attempt() 是用于 登录认证 的方法，它需要明文密码并触发 session 创建/验证，完全不适用于登出场景；
在受 auth:sanctum 中间件保护的路由中，Sanctum 已通过 Bearer Token 自动将当前用户注入 Auth::user()；你却额外调用 Auth::attempt()，这不仅冗余，更会因 $request->email/password 为空导致认证失败，进而使后续 Auth::user() 返回 null，最终抛出 401。

✅ 正确登出的核心原则：信任 Sanctum 的中间件已完成认证，直接操作当前用户的 Personal Access Token 即可。

✅ 正确实现：简洁、安全、符合 Sanctum 规范

1. 后端控制器修正（`AuthController.php`）

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

public function logout(Request $request)
{
    // ✅ Sanctum 会自动解析 Bearer Token 并设置 Auth::user()
    $user = Auth::user();

    // ✅ 删除当前用户的 Personal Access Token（即本次会话 Token）
    $user->currentAccessToken()->delete();

    // ✅ 清除前端 Cookie（可选，取决于是否使用 stateful 模式）
    // 如果你启用了 stateful 认证（如 `SANCTUM_STATEFUL_DOMAINS`），建议同时清除 session
    // Auth::guard('web')->logout();

    return response()->json([
        'message' => 'Successfully logged out'
    ]);
}

? 关键点：

移除所有 Auth::attempt()、$request->email/password 相关逻辑；

使用 $user->currentAccessToken()->delete() 精准删除当前请求所用的 Token（非全部 Token）；

若需彻底退出 stateful 会话（如同时使用 Web Guard），可追加 Auth::guard('web')->logout()。

2. 前端登出请求优化（`Dropdown.js`）

你当前的 Axios 请求存在格式错误：headers 被错误地放在请求体（第二个参数）中，而非配置对象内。

✅ 修正后的登出请求：

function logout() {
  axios
    .post('http://backend.bisa_js.test/api/logout', {}, { // ← 空数据体，配置对象放第三位
      headers: {
        Accept: 'application/json',
        Authorization: `Bearer ${cookie.token}`,
      },
      withCredentials: true, // ✅ 必须启用，确保 Cookie（如 XSRF-TOKEN）被发送
    })
    .then((response) => {
      console.log(response.data.message);
      // 清理前端存储
      removeCookie('token', { path: '/' });
      removeCookie('user', { path: '/' });
      navigate('/login');
    })
    .catch((error) => {
      console.error('Logout failed:', error.response?.data || error.message);
      // 即使 API 失败，也应清理本地凭证
      removeCookie('token', { path: '/' });
      removeCookie('user', { path: '/' });
      navigate('/login');
    });
}

⚠️ 注意事项：

Laravel
避免常见的Laravel错误：N+1查询、批量赋值、缓存陷阱及队列序列化陷阱。

下载

withCredentials: true 是必须项，否则浏览器不会发送 XSRF-TOKEN Cookie，导致 CSRF 验证失败（尤其在 EnsureFrontendRequestsAreStateful 中间件下）；

登出请求体应为空 {}，Headers 必须置于 Axios 配置对象（第三个参数）中；

建议无论后端是否成功，前端都主动清除 token 和 user Cookie，保障状态一致性。

3. 配置复查（关键！）

确保以下配置与 Sanctum 官方要求严格一致：

config/sanctum.php
stateful 域名必须包含你的前端地址（如 localhost:3000），且 guard 应为 ['web']（你已正确配置）。
config/cors.php
supports_credentials 必须为 true，allowed_origins 需明确列出前端域名（你已做到）。
app/Http/Kernel.php
api 中间件组中 EnsureFrontendRequestsAreStateful::class 必须位于 throttle 之前（你当前顺序正确）。
CSRF 保护（重要补充）
Sanctum 登出需校验 CSRF Token。请确保前端在登出前已预加载 CSRF Cookie：
```
// 在登出前或 App 初始化时调用
await axios.get('http://backend.bisa_js.test/sanctum/csrf-cookie');
```
或在 Login.js 中取消注释该行并确保执行。

? 总结：登出成功的三大支柱

组件	要求	检查点
后端逻辑	不依赖密码，仅操作 `currentAccessToken()`	✅ 移除 `Auth::attempt()`，使用 `$user->currentAccessToken()->delete()`
前端请求	正确携带 Bearer Token + `withCredentials: true`	✅ Headers 在配置对象中，空请求体，预加载 CSRF Cookie
中间件配置	`EnsureFrontendRequestsAreStateful` 生效且顺序正确	✅ `api` 中间件组首位，`stateful` 域名匹配，CORS 支持凭据