如何在多个Vue项目中共享Sanctum登录状态？

你的问题核心是跨域Cookie共享配置错误，导致Vue项目1的Cookie无法被项目2识别。以下是具体修复步骤：

1. 配置Laravel后端的跨域基础设置 #

• 修改.env文件，设置共享的根域名：

  SESSION_DOMAIN=.your-domain.com  # 比如两个项目是app1.your-domain.com和app2.your-domain.com，这里填.your-domain.com
  SANCTUM_STATEFUL_DOMAINS=app1.your-domain.com,app2.your-domain.com
  

• 更新config/sanctum.php中的stateful数组，把两个Vue项目的域名加进去：

  'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'app1.your-domain.com,app2.your-domain.com')),
  

2. 修正Cookie的设置参数 #

你当前的Cookie设置缺少跨域所需的domain、path和SameSite属性，调整代码如下：

// 删除旧Cookie
$response = response()->json($data, 200)->withCookie(cookie()->forget('jwt_token'));

// 设置新Cookie，指定跨域参数
$cookie = cookie()->make(
    'jwt_token',
    $token,
    360, // 有效期（分钟）
    '/', // 根路径确保所有子路径都能访问
    env('SESSION_DOMAIN'), // 和.env里的SESSION_DOMAIN一致
    env('APP_ENV') === 'production', // 生产环境开启secure（HTTPS）
    true, // 开启httpOnly防止XSS攻击
    false,
    'lax' // 跨域场景用'lax'，第三方跨域需用'none'且配合secure=true
);

return $response->withCookie($cookie);

3. 前端Vue项目的跨域配置 #

两个Vue项目都需要配置axios携带Cookie：

// 在axios初始化代码中添加
axios.defaults.withCredentials = true;

确保所有请求都发送到同一个后端API域名（比如api.your-domain.com），避免使用不同域名或IP。

4. 本地开发注意事项 #

如果是本地测试（比如localhost:8080和localhost:8081）：

• 修改本地hosts文件，给两个项目配置自定义域名：

  127.0.0.1 app1.test
  127.0.0.1 app2.test
  

• 把.env里的SESSION_DOMAIN设为.test，SANCTUM_STATEFUL_DOMAINS设为app1.test,app2.test
• 前端项目分别用app1.test:8080和app2.test:8081访问

验证配置 #

登录Vue项目1后，打开浏览器开发者工具（Application -> Cookies），检查jwt_token的Domain是否为你设置的根域名（比如.your-domain.com）、Path是否为/。如果符合，切换到Vue项目2刷新页面，即可读取到Cookie保持登录状态。

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