Next.js API路由无法获取Supabase用户的问题求助

问题分析 #

你遇到的Invalid token: token contains an invalid number of segments错误，核心原因是在API路由中手动读取sb-access-token cookie并传递给getUser的方式有误，导致Supabase无法解析有效JWT。而getServerSideProps能正常获取用户，是因为它直接使用了Supabase的getUserByCookie方法正确处理了cookie。

具体修复步骤 #

1. 用Auth Helpers工具函数获取用户 #

放弃手动读取cookie的方式，直接使用@supabase/auth-helpers-nextjs提供的getUser函数，它会自动处理cookie的读取和验证：

修改src/pages/api/board.ts：

import prisma from 'Utilities/PrismaClient'
import { getUser } from '@supabase/auth-helpers-nextjs'

export default async function handler (req, res) {
  
  if (req.method === 'GET') {
    // 直接通过getUser获取用户，无需手动传token
    const { user, error } = await getUser({ req, res })

    if (error || !user) {
      return res.status(401).json({ error: error?.message || 'Unauthorized' })
    }

    // 仅查询当前用户所属的boards（需确保board表有userId关联字段）
    const result = await prisma.board.findMany({
      where: { userId: user.id },
      select: {
        name: true,
        id: true,
        user: true,
        description: true
      }
    })
    res.json({ boards: result })
  }

  if (req.method === 'POST') {
    const { user, error } = await getUser({ req, res })

    if (error || !user) {
      return res.status(401).json({ error: error?.message || 'Unauthorized' })
    }

    const { name, description } = req.body
    const result = await prisma.board.create({
      data: {
        name,
        description,
        userId: user.id // 关联当前用户ID
      }
    })
    res.status(201).json({ board: result })
  }
}

2. 确保API请求携带Credentials #

前端发起API请求时，必须携带cookie才能让服务端验证用户身份。修改handleGetBoards函数，添加withCredentials配置：

async function handleGetBoards(req) {
  return axios.get(`${getBaseUrl(req)}/api/board`, {
    withCredentials: true // 强制携带cookie
  })
  .then(({data}) => data.boards)
  .catch(err => console.log(err))
}

3. 检查Supabase客户端Cookie配置 #

确认你的Supabase客户端配置了正确的cookie选项，确保cookie能在整个站点内有效传递：

// src/Utilities/SupabaseClient.ts
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export default createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    cookieOptions: {
      sameSite: 'lax',
      path: '/',
      maxAge: 60 * 60 * 24 * 7 // 7天有效期
    }
  }
})

4. 验证Auth路由的正确性 #

你的/api/auth路由代码是正确的，但需确保它能在用户登录状态变化时正确设置cookie：

// src/api/auth.js
import supabase from 'Utilities/SupabaseClient'

export default function handler (req, res) {
  supabase.auth.api.setAuthCookie(req, res)
}

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