Node.js单页面登录注册功能出现无限加载循环问题求助

核心问题分析 #

• 路由冲突：routes/auth.js中重复定义POST /auth/register路由，Express仅会执行第一个匹配的register控制器，login控制器永远无法被触发
• 请求无响应：注册、登录控制器存在未返回响应的分支，导致浏览器请求长期挂起，进而触发重试或无限加载
• 登录表单提交异常：登录按钮位于<form>标签外部，无法正确触发表单提交，可能引发前端异常逻辑

修复步骤 #

1. 修正路由配置 #

为登录、注册设置独立路由，避免冲突：

const express = require('express');
const authController = require('../controllers/auth');
const router = express.Router();

// 注册路由
router.post('/register', authController.register);
// 登录路由
router.post('/login', authController.login);

module.exports = router;

2. 修复登录表单结构 #

将登录按钮移至<form>标签内部，并更新表单提交地址：

<div id="login">
    <h1 class="loginh1 transform2">Willkommen</h1>
    <form class="form transform3" action="/auth/login" method="POST">
        <div class="input-container">
            <label class="label" for="email"><img src="../img/ETCO-img/icons/mail.svg" height="25px"> <span style="margin-left:25px;"></span></label>
            <input placeholder="example@gmail.com" class="input" type="email" id="emaillogin" name="emaillogin">
        </div><br>
        <div class="input-container">
            <label class="label" for="password"><img src="../img/ETCO-img/icons/lock.svg" height="25px"> <span style="margin-left:25px;"></span></label>
            <input placeholder="Passwort" class="input" type="password" id="passwordlogin" name="passwordlogin">
        </div>
        <!-- 提交按钮移至form内部 -->
        <button type="submit" class="bnlogin transform4">LOGIN</button>
    </form>
</div>

3. 完善注册控制器响应逻辑 #

确保所有分支都返回响应，避免请求挂起：

exports.register = (req, res) => {
    console.log(req.body);
    const { name, email, password, passwordConfirm } = req.body;

    db.query('SELECT email from users WHERE email = ?', [email], async(error, results) => {
        if (error) {
            console.log(error);
            return res.status(500).render('message/error', { message: '数据库查询失败' });
        }
        if (results.length > 0) {
            return res.render('message/emailerror');
        } else if (password !== passwordConfirm) {
            return res.render('message/pwderror');
        }

        const hashedPassword = await bcrypt.hash(password, 10);
        console.log(hashedPassword);

        db.query('INSERT INTO users SET ?', { name: name, email: email, password: hashedPassword }, (error, results) => {
            if (error) {
                console.log(error);
                return res.status(500).render('message/error', { message: '用户注册失败' });
            } else {
                console.log(results);
                console.log('+++++++++++   User registered   ++++++++++')
                // 注册成功后返回页面
                return res.render('register', {
                    message: '用户注册成功'
                });
            }
        });
    });
}

注：删除了冗余的let hashedPassword = bcrypt.hash(password, 10);代码

4. 补全登录控制器逻辑 #

完成用户查询、密码验证，并返回明确响应：

exports.login = async (req, res) => {
    try {
        const { emaillogin, passwordlogin } = req.body;
        if (!emaillogin || !passwordlogin) {
            return res.status(400).render('register', {
                message: '请填写邮箱和密码'
            });
        }

        // 查询用户信息
        db.query('SELECT * FROM users WHERE email = ?', [emaillogin], async (error, results) => {
            if (error) {
                console.log(error);
                return res.status(500).render('register', { message: '数据库查询失败' });
            }
            // 用户不存在或密码不匹配
            if (results.length === 0 || !(await bcrypt.compare(passwordlogin, results[0].password))) {
                return res.status(401).render('register', { message: '邮箱或密码错误' });
            }

            // 登录成功，可在此处生成JWT或设置会话
            console.log('用户登录成功');
            return res.redirect('/dashboard'); // 重定向到用户面板或首页
        });
    } catch (error) {
        console.log(error);
        return res.status(500).render('register', { message: '服务器内部错误' });
    }
}

额外优化建议 #

• 为表单添加前端验证，减少无效后端请求
• 使用数据库连接池替代单一连接，提升服务稳定性
• 为敏感操作添加错误日志，便于问题排查

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