Next.js首次加载时Moqui后端多会话创建问题及解决方案咨询

一、使用Next.js中间件统一会话初始化 #

• 原理：用户首次访问时，通过中间件提前发起Moqui会话初始化请求，获取会话Cookie后再放行后续请求，确保所有组件API调用复用同一个会话
• 实现步骤：
  1. 在项目根目录创建 middleware.ts（或.js）文件
  2. 编写逻辑：检查请求中是否存在Moqui会话Cookie，不存在则调用Moqui会话初始化接口（如默认的/rest/session），将返回的Cookie写入响应
  3. 配置中间件匹配所有前端页面和API路由，确保所有请求都经过会话校验
• 核心代码示例：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export async function middleware(request: NextRequest) {
  const moquiSessionCookie = request.cookies.get('moqui.sessionId')
  if (!moquiSessionCookie) {
    const sessionRes = await fetch(`${process.env.MOQUI_API_URL}/rest/session`, {
      method: 'GET',
      credentials: 'include'
    })
    const sessionCookie = sessionRes.headers.get('set-cookie')
    if (sessionCookie) {
      const response = NextResponse.next()
      response.headers.set('set-cookie', sessionCookie)
      return response
    }
  }
  return NextResponse.next()
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)', '/api/:path*']
}

二、API路由代理所有Moqui请求 #

• 原理：将客户端所有Moqui API请求通过Next.js的API路由转发，在代理层统一管理会话Cookie，避免并行请求重复创建会话
• 实现步骤：
  1. 创建代理路由：Pages Router用pages/api/moqui/[...path].ts，App Router用app/api/moqui/[...path]/route.ts
  2. 在代理逻辑中，先检查请求Cookie里的会话ID，不存在则初始化会话，再携带该Cookie转发请求到Moqui
  3. 将Moqui返回的Cookie同步到响应，确保客户端持久化
• 核心代码示例（App Router）：

import { NextResponse } from 'next/server'

export async function GET(request: Request, { params }: { params: { path: string[] } }) {
  const moquiPath = params.path.join('/')
  const cookieHeader = request.headers.get('cookie')
  let sessionCookie = cookieHeader?.match(/moqui\.sessionId=([^;]+)/)?.[1]

  if (!sessionCookie) {
    const initRes = await fetch(`${process.env.MOQUI_API_URL}/rest/session`, {
      method: 'GET',
      credentials: 'include'
    })
    sessionCookie = initRes.headers.get('set-cookie')?.match(/moqui\.sessionId=([^;]+)/)?.[1]
  }

  const moquiRes = await fetch(`${process.env.MOQUI_API_URL}/${moquiPath}`, {
    headers: { Cookie: `moqui.sessionId=${sessionCookie}` },
    credentials: 'include'
  })

  const response = new NextResponse(moquiRes.body, {
    status: moquiRes.status,
    headers: moquiRes.headers
  })
  if (sessionCookie) {
    response.cookies.set('moqui.sessionId', sessionCookie, {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production',
      sameSite: 'strict',
      path: '/'
    })
  }
  return response
}

// 按需实现POST/PUT/DELETE等请求方法

三、客户端预加载会话Cookie #

• 原理：在根组件初始化阶段，先完成Moqui会话初始化，获取Cookie后再渲染其他组件，避免并行请求无Cookie的情况
• 实现步骤：
  1. 在Pages Router的_app.tsx或App Router的根布局组件中，使用useEffect（客户端组件）或直接在服务器组件中发起会话请求
  2. 将获取到的Cookie存入document.cookie，后续组件API请求自动携带
• 核心代码示例（Pages Router的_app.tsx）：

import { useEffect } from 'react'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    async function initMoquiSession() {
      if (!document.cookie.includes('moqui.sessionId')) {
        await fetch(`${process.env.NEXT_PUBLIC_MOQUI_API_URL}/rest/session`, {
          credentials: 'include'
        })
      }
    }
    initMoquiSession()
  }, [])

  return <Component {...pageProps} />
}

export default MyApp

四、Moqui后端辅助优化 #

• 调整Moqui配置减少无效会话：
  • 修改moqui.conf，将会话Cookie的SameSite属性设为Strict或Lax，避免跨域场景下的Cookie丢失
  • 启用Moqui访客会话复用机制，针对未登录用户的无Cookie请求，允许在短时间内复用同一会话（需结合Moqui会话策略配置）

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