Next.js登录功能实现后无法重定向至首页问题求助

核心问题分析 #

• 密码匹配逻辑完全错误：UserPassword是所有用户密码组成的数组，直接和输入的password（字符串）比较永远不成立，登录验证逻辑根本无法触发。
• 响应方法调用顺序错误：res.redirect()后调用status()和send()会导致响应头混乱，触发Next.js的响应处理错误。
• 前端传用户列表存在严重安全隐患：直接从前端接收全量用户数据做验证，等于把所有用户的账号密码暴露给前端，任何人都能伪造登录。
• AJAX请求无法触发页面重定向：如果前端用fetch/axios调用API，浏览器不会自动跟随后端的重定向跳转页面——AJAX请求的重定向仅在请求层面生效，不会触发页面跳转。

修正后的登录API代码 #

import { createClient } from '@sanity/client'

// 初始化Sanity客户端（替换成你的项目信息）
const client = createClient({
  projectId: '你的项目ID',
  dataset: '你的数据集',
  useCdn: false, // 登录验证需要实时数据，禁用CDN
  apiVersion: '2024-01-01',
})

export default async function login(req, res) {
  // 仅处理POST请求
  if (req.method !== 'POST') {
    return res.status(405).send('Method Not Allowed')
  }

  try {
    const { email, password } = JSON.parse(req.body)

    // 从Sanity查询对应邮箱的用户（避免前端传全量用户数据）
    const user = await client.fetch(`
      *[_type == "user" && email == $email][0]
    `, { email })

    if (!user) {
      return res.status(401).json({ success: false, message: '用户不存在' })
    }

    // 验证密码（生产环境必须用哈希密码，禁止存明文！）
    if (user.password !== password) {
      return res.status(401).json({ success: false, message: '密码错误' })
    }

    // 设置登录会话cookie（推荐用next-auth，这里是简化示例）
    res.setHeader('Set-Cookie', `loggedIn=true; Path=/; HttpOnly; SameSite=Lax`)

    // 返回成功状态，由前端负责跳转
    return res.status(200).json({ success: true, message: '登录成功' })
  } catch (error) {
    console.error('登录错误:', error)
    return res.status(500).json({ success: false, message: '服务器内部错误' })
  }
}

前端登录请求处理示例 #

import { useRouter } from 'next/router'

export default function LoginForm() {
  const router = useRouter()

  const handleLogin = async (e) => {
    e.preventDefault()
    const email = e.target.email.value
    const password = e.target.password.value

    const res = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ email, password }),
    })

    const data = await res.json()
    if (data.success) {
      // 登录成功后前端主动跳转首页
      router.push('/')
    } else {
      alert(data.message)
    }
  }

  return (
    <form onSubmit={handleLogin}>
      <input type="email" name="email" placeholder="邮箱" required />
      <input type="password" name="password" placeholder="密码" required />
      <button type="submit">登录</button>
    </form>
  )
}

关键注意事项 #

• 密码安全：生产环境必须用bcrypt等哈希算法存储密码，绝对不能存明文，验证时用哈希值比对。
• 会话管理：推荐使用next-auth库处理登录会话，比手动设置cookie更安全、更易维护。
• API命名规范：API路由文件建议命名为login.js，函数名对应功能，避免混淆。

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