Node.js后端邮箱验证链接404及verificationToken传递异常问题

问题概述 #

基于Node.js开发的邮箱验证功能，注册后向用户邮箱发送验证链接，用户点击链接时返回404 (Not Found)错误，且请求中的verificationToken参数为undefined，仅userid能正常获取。后端路由定义为路径参数模式，但实际请求使用查询参数传递。

核心原因分析 #

1. 路由匹配失败：后端路由定义为/verify/:userid/:verificationToken（路径参数），但前端实际发起的请求是/api/verify?userid=xxx&verificationToken=undefined（查询参数），导致后端无法匹配对应路由，返回404。
2. 前端参数获取错误：Next.js页面未配置对应路径参数的路由结构，useParams()无法正确获取verificationToken，传递给后端时变为undefined。
3. 后端控制器参数处理错误：控制器错误使用req.query获取路径参数，且存在变量名大小写不一致问题（定义userid但判断时用userId）。

分步解决方案 #

一、后端代码修复 #

1. 修正参数获取方式：从req.params获取路径参数，同时统一变量名：

userController.verifyEmail = async (req, res) => {
  try {
    // 从路径参数中取值，与路由定义的变量名保持一致
    const { userid, verificationToken } = req.params;

    // 验证userid有效性，变量名统一为userid
    if (!userid || typeof userid !== 'string') {
      return res.status(400).json({ error: 'Invalid user ID.' });
    }

    if (!verificationToken || typeof verificationToken !== 'string') {
      return res.status(400).json({ error: 'Invalid token.' });
    }

    const user = await User.findById(userid);

    if (!user) {
      return res.status(404).json({ error: 'User not found.' });
    }

    if (user.verificationToken !== verificationToken) {
      return res.status(400).json({ error: 'Invalid token. Please check your email for the correct verification link.' });
    }

    // 标记邮箱为已验证并清除token
    user.isVerified = true;
    user.verificationToken = undefined;
    await user.save();

    res.json({ message: 'Email verification successful.' });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Server error' });
  }
};

2. 确认路由挂载路径：确保验证路由挂载在/api前缀下，主应用配置示例：

app.use('/api', router);

二、前端代码修复 #

1. 配置Next.js页面路由：

   • App Router：创建路径app/verify/[userid]/[verificationToken]/page.js；
   • Pages Router：创建路径pages/verify/[userid]/[verificationToken].js；
     确保页面路由结构与邮件链接的路径参数匹配。

2. 修改API调用逻辑：使用路径参数调用后端接口，增加参数有效性校验：

"use client"

import { useEffect, useState } from "react";
import axios from "axios";
import { useParams } from 'next/navigation';
import Navbar from "@/components/ui/navbar";
import Footer from "@/components/ui/footer";

const VerifyEmail = () => {
  const params = useParams();
  const { userid, verificationToken } = params;

  const [message, setMessage] = useState("Verifying...");

  useEffect(() => {
    const verifyEmail = async () => {
      // 提前校验参数有效性
      if (!userid || !verificationToken) {
        setMessage("Invalid verification link.");
        return;
      }
      try {
        // 使用路径参数拼接后端接口地址
        const response = await axios.get(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/verify/${userid}/${verificationToken}`);
        setMessage("Email verification successful!");
      } catch (error) {
        console.error(error);
        setMessage(error.response?.data?.error || "Email verification failed. Please try again later.");
      }
    };

    verifyEmail();
  }, [userid, verificationToken]);

  return (
    <>
      <Navbar/>
      <div className="flex items-center justify-center min-h-screen">
        <div className="bg-white p-8 shadow-md rounded-lg">
          <h1 className="text-3xl font-semibold mb-4">{message}</h1>
        </div>
      </div>
      <Footer/>
    </>
  );
};

export default VerifyEmail;

三、邮件链接一致性修复 #

注册控制器中，确保邮件链接指向前端页面，使用前端域名作为基础地址：

// 定义前端基础地址，比如http://localhost:3000
const FRONTEND_BASE_URL = process.env.FRONTEND_BASE_URL || "http://localhost:3000";
const verificationLink = `${FRONTEND_BASE_URL}/verify/${user.id}/${encodeURIComponent(verificationToken)}`;

验证步骤 #

1. 重启后端与前端服务；
2. 注册新用户，查看邮件中的链接格式是否为http://前端域名/verify/用户ID/验证Token；
3. 点击链接，检查前端控制台输出的userid和verificationToken是否正确；
4. 确认后端返回验证成功消息，数据库中用户的isVerified字段设为true。

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