为何多前端应用共享后端JWT Cookie？Laravel+VueJS技术问询

我有一个Laravel后端和两个Vue.js前端应用，使用Laravel Passport颁发JWT Token并存储在Cookie中。原本预期两个前端应用拥有独立的Cookie，但登录其中一个应用后，相同的JWT Cookie会出现在两个应用的Cookie存储中，导致用户同时在两个应用完成认证。

登录方法代码如下：

public function login(LoginRequest $request)
{
    $user = User::where('email', $request->input('email'))->first();

    if($user) {
        if ($user->isCustomer() && $request->input('scope') != 'customer') {
            throw new AccessDeniedHttpException('Permission denied');
        }

        if(Hash::check($request->input('password'), $user->password)) {
            $token = $user->createToken('jwt', [$request->input('scope')])->accessToken;

            $cookie = \cookie("jwt", $token, 3600);
        } else {
            throw new BadRequestHttpException('Password mismatch');
        }
    } else {
        throw new BadRequestHttpException('There is no such user');
    }

    return \response([
        'token' => $token
    ])->withCookie($cookie);
}

登录后两个应用的Cookie存储中都会出现相同值的jwt Cookie。

核心问题是Cookie的名称重复或作用域过宽导致浏览器在多个前端应用间共享Cookie，以下是具体解决思路：

方案1：为不同前端设置专属Cookie名称 #

给两个前端分配不同的Cookie名称，根据登录请求的标识（比如scope或自定义参数）区分：

// 根据前端标识确定Cookie名称
$cookieName = match($request->input('scope')) {
    'customer' => 'jwt_customer',
    'admin' => 'jwt_admin',
    default => 'jwt'
};
$cookie = \cookie($cookieName, $token, 3600);

之后每个前端在发起请求时，各自读取对应名称的Cookie发送给后端，后端验证逻辑也需对应读取指定Cookie值。

方案2：限制Cookie的作用域（适用于不同子域的前端） #

如果两个前端属于不同子域（比如customer.yourdomain.com和admin.yourdomain.com），可以通过设置Cookie的domain参数，让Cookie仅归属对应子域：

// 根据前端来源设置专属domain
$domain = $request->input('frontend_type') === 'customer' 
    ? 'customer.yourdomain.com' 
    : 'admin.yourdomain.com';

// 开启httpOnly防XSS，生产环境建议开启secure（HTTPS下生效）
$cookie = \cookie("jwt", $token, 3600, null, $domain, env('APP_ENV') === 'production', true);

注意：后端域名需与前端子域同根域，且浏览器会严格遵循Cookie的作用域规则。

方案3：结合Scope验证限制跨前端访问 #

如果不想修改Cookie配置，可以在后端添加中间件，验证Token的Scope与当前前端的预期标识是否匹配：

// 自定义中间件代码
public function handle($request, Closure $next)
{
    $user = auth()->user();
    // 前端请求时在请求头携带专属标识
    $expectedScope = $request->header('X-Frontend-Scope');

    if (!$user || !$user->tokenCan($expectedScope)) {
        abort(403, '无此应用访问权限');
    }

    return $next($request);
}

即使Cookie共享，不同前端请求时携带不同的Scope标识，后端会拒绝不符合权限的请求。

• 始终开启Cookie的httpOnly和secure属性，提升安全性；
• 前端使用Axios等工具发起请求时，需设置withCredentials: true以携带Cookie，同时后端CORS配置要允许对应域名携带凭证。

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