Laravel Sanctum SPA与API认证问题及流程疑问求助

一、关于sanctum/csrf-cookie路由的问题 #

不需要手动在api.php中定义该路由，Laravel Sanctum框架已自带此路由。

• 选项1返回204是正常现象：CsrfCookieController@show的作用就是设置CSRF cookie，本身不需要返回内容，204状态码（无内容）符合预期，这是正确的调用方式。
• 选项2完全错误：给该路由加上auth:sanctum中间件，意味着需要先登录才能获取CSRF cookie，逻辑完全颠倒，必然返回401未授权。

二、现有配置检查 #

你当前的配置是正确的：

• 已启用EnsureFrontendRequestsAreStateful中间件
• .env中SANCTUM_STATEFUL_DOMAINS和SESSION_DOMAIN配置符合本地开发场景
• 前端bootstrap.js中withCredentials=true及X-Requested-With头的设置正确，能确保请求携带cookie

三、疑问解答 #

1. 登录获取的token是否该存localStorage？ #

不建议存localStorage，XSS攻击可轻易窃取其中的token，风险很高。

• 若是SPA认证场景：根本不需要手动存token，Sanctum会通过HttpOnly类型的session cookie维持登录状态，这种方式能避免XSS窃取。
• 若是纯API认证场景（如给移动端、第三方客户端用）：优先将token存在HttpOnly、Secure的cookie中；若必须存在前端，可改用sessionStorage（关闭浏览器即自动清除），相对更安全。

2. 当前Laravel Sanctum API认证流程是否正确？ #

需区分两种认证场景：

• SPA认证流程（正确步骤）：
  1. 前端先请求/sanctum/csrf-cookie设置CSRF cookie
  2. 发送POST请求到登录接口（携带邮箱、密码）
  3. 登录成功后，后续请求会自动携带session cookie，无需手动处理token
• 纯API认证流程（正确步骤）：
  1. 用户发送登录请求，后端验证成功后返回API token
  2. 客户端存储token，每次请求时在请求头中携带Authorization: Bearer {token}
     你当前同时做SPA和API认证，需明确不同场景的流程，不要混淆。

3. 若存localStorage，如何将token作为Authorization Bearer使用？ #

登录成功后将token存入localStorage，然后给axios添加请求拦截器，自动在请求头中携带token：

// 在signin.js或全局axios配置中添加
axios.interceptors.request.use(config => {
    const token = localStorage.getItem('auth_token');
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
});

注意：此方式仅适用于纯API场景，SPA场景建议用cookie会话，无需此操作。

4. 登录后跳转路由Route::get('/', [ProductController::class, 'showproduct']);是否有问题？ #

分情况判断：

• 若这是前端SPA路由跳转：没问题，前端自己处理路由跳转即可，后端只需返回登录成功的响应。
• 若这是后端路由：
  • 若是SPA的入口页面（比如返回blade渲染的HTML），放在web.php中并使用web中间件即可，没问题。
  • 若是API接口，不建议后端做跳转，应返回数据让前端自行处理页面跳转；若该接口需要认证，需给路由加上auth:sanctum中间件。

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