Laravel Breeze+Next.js项目：如何在服务端组件中校验用户认证？

要在服务端组件（SSC）里校验用户是否已认证，核心是利用Laravel Sanctum的会话认证机制，结合Next.js服务端的Cookie获取能力，直接在服务端完成身份校验。以下是具体实现方案：

1. 直接在服务端组件中携带认证Cookie请求后端 #

服务端组件渲染时可以直接获取请求携带的Cookie，将laravel_session和XSRF-TOKEN传递给后端Sanctum接口，以此校验用户身份：

import { cookies } from 'next/headers';

export default async function Me() {
  const cookieStore = cookies();
  const laravelSession = cookieStore.get('laravel_session')?.value;
  const xsrfToken = cookieStore.get('XSRF-TOKEN')?.value;

  // 发起服务端请求，携带认证信息
  const response = await fetch('http://你的Laravel域名/api/test-data', {
    headers: {
      Cookie: `laravel_session=${laravelSession}; XSRF-TOKEN=${xsrfToken}`,
      'X-XSRF-TOKEN': xsrfToken
    },
    credentials: 'include'
  });

  // 校验请求状态，未认证会返回401
  if (!response.ok) {
    // 未认证时的处理：返回提示或跳转登录页
    return <div>请先登录后访问</div>;
  }

  const data = await response.json();

  return (
    <div>
      Server side component - { data.length }
    </div>
  );
}

2. 封装复用的认证校验函数 #

把认证逻辑抽成单独的工具函数，方便在多个服务端组件中复用：

// app/lib/auth.js
import { cookies } from 'next/headers';

export async function getAuthenticatedUser() {
  const cookieStore = cookies();
  const laravelSession = cookieStore.get('laravel_session')?.value;
  const xsrfToken = cookieStore.get('XSRF-TOKEN')?.value;

  // 缺少必要Cookie直接返回null
  if (!laravelSession || !xsrfToken) return null;

  // 请求Laravel的用户信息接口校验身份
  const response = await fetch('http://你的Laravel域名/api/user', {
    headers: {
      Cookie: `laravel_session=${laravelSession}; XSRF-TOKEN=${xsrfToken}`,
      'X-XSRF-TOKEN': xsrfToken
    },
    credentials: 'include'
  });

  return response.ok ? await response.json() : null;
}

在服务端组件中调用：

import { getAuthenticatedUser } from '@/app/lib/auth';
import { cookies } from 'next/headers';

export default async function Me() {
  const user = await getAuthenticatedUser();

  if (!user) {
    return <div>请先登录</div>;
  }

  // 已认证，获取业务数据
  const cookieStore = cookies();
  const laravelSession = cookieStore.get('laravel_session')?.value;
  const xsrfToken = cookieStore.get('XSRF-TOKEN')?.value;

  const dataResponse = await fetch('http://你的Laravel域名/api/test-data', {
    headers: {
      Cookie: `laravel_session=${laravelSession}; XSRF-TOKEN=${xsrfToken}`,
      'X-XSRF-TOKEN': xsrfToken
    },
    credentials: 'include'
  });

  const data = await dataResponse.json();

  return (
    <div>
      欢迎 {user.name} - Server side component - { data.length }
    </div>
  );
}

注意事项 #

• 确保Laravel后端的SANCTUM_STATEFUL_DOMAINS配置项包含你的Next.js域名，否则跨域请求会被拒绝
• 服务端请求必须携带完整的认证Cookie和XSRF Token，Sanctum才能识别用户会话
• 未认证的处理逻辑直接在服务端完成，无需等到客户端渲染后再跳转

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