如何在Next.js中对接Go后端的JWT外部认证？

如果搞不懂NextAuth的Credentials逻辑，完全可以手动实现JWT认证流程，或者用更轻量化的方式对接你的Go后端，下面是几种可行方案：

一、手动实现完整JWT认证流程 #

这是最灵活的方式，完全自主控制每一步：

• 前端登录请求：在登录页面收集用户账号密码，POST到你的Go后端认证接口，后端验证通过后返回JWT Token（建议同时返回Refresh Token）

  // 登录组件示例
  async function handleLogin() {
    const res = await fetch('https://你的Go后端域名/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    })
    const data = await res.json()
    if (res.ok) {
      // 把Token存在HttpOnly Cookie（推荐，防止XSS）或者localStorage
      document.cookie = `token=${data.token}; path=/; secure; HttpOnly`
      // 跳转到首页或需要认证的页面
      router.push('/dashboard')
    }
  }
  

• 全局请求拦截：用axios或者fetch封装函数，给所有需要认证的请求自动带上Token

  // 封装fetch工具函数
  async function authFetch(url: string, options: RequestInit = {}) {
    const token = document.cookie.split('; ').find(row => row.startsWith('token='))?.split('=')[1]
    return fetch(url, {
      ...options,
      headers: {
        ...options.headers,
        Authorization: token ? `Bearer ${token}` : ''
      }
    })
  }
  

• Token验证与刷新：在Next.js的Middleware或者页面加载前，校验Token有效性。如果用Middleware，可以全局拦截需要认证的路由：

  // middleware.ts
  import { NextResponse } from 'next/server'
  import type { NextRequest } from 'next/server'
  
  export async function middleware(request: NextRequest) {
    const token = request.cookies.get('token')?.value
    // 调用Go后端的Token验证接口
    const validateRes = await fetch('https://你的Go后端域名/api/validate-token', {
      headers: { Authorization: `Bearer ${token}` }
    })
    if (!token || !validateRes.ok) {
      // 未认证则重定向到登录页
      return NextResponse.redirect(new URL('/login', request.url))
    }
    return NextResponse.next()
  }
  
  // 指定需要认证的路由
  export const config = {
    matcher: ['/dashboard/:path*', '/profile']
  }
  

二、用Next.js API路由做中间层 #

把Go后端的认证接口封装到Next.js的API路由里，前端只和Next.js交互，避免跨域问题，也方便统一处理Token：

• 在app/api/login/route.ts（Pages Router对应pages/api/login.ts）里转发请求到Go后端：

  // App Router示例
  export async function POST(request: Request) {
    const body = await request.json()
    // 转发到Go后端
    const res = await fetch('https://你的Go后端域名/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body)
    })
    const data = await res.json()
    if (res.ok) {
      // 设置HttpOnly Cookie返回给前端
      const response = NextResponse.json(data)
      response.cookies.set({
        name: 'token',
        value: data.token,
        httpOnly: true,
        secure: process.env.NODE_ENV === 'production',
        path: '/'
      })
      return response
    }
    return NextResponse.json({ error: '登录失败' }, { status: res.status })
  }
  

• 前端直接调用/api/login即可，后续请求同样通过Next.js API路由转发，自动带上Token。

三、基于Cookie的会话认证（如果Go后端支持） #

如果你的Go后端已经实现了基于Cookie的会话管理（比如设置HttpOnly Cookie存储会话ID），那Next.js这边几乎不用额外处理：

• 用户登录后，Go后端返回的Cookie会自动被浏览器保存
• 后续前端请求（不管是页面还是API）都会自动带上这个Cookie，Go后端直接校验会话即可
• 这种方式完全不用手动处理JWT，更省心，适合后端已经完善会话机制的场景

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