React JS登录系统实现求助：Express后端/login接口开发指导

修复核心问题并完成登录逻辑 #

原代码里的/login接口存在参数获取错误，应该从req.body获取前端传入的用户名和密码，而非res.db。以下是完整的实现代码：

app.post('/login', (req, res) => {
    // 从请求体获取前端传入的用户名和密码
    const username = req.body.username;
    const password = req.body.password;

    // 根据用户名查询数据库中的用户记录
    db.query(
        'SELECT * FROM users WHERE username = ?',
        [username],
        (err, results) => {
            if (err) {
                console.log(err);
                return res.status(500).send('服务器内部错误');
            }
            // 未找到对应用户
            if (results.length === 0) {
                return res.status(401).send('用户名或密码错误');
            }
            // 获取查询到的用户信息
            const user = results[0];
            // 对比密码（注意：这里是明文对比，生产环境必须加密）
            if (user.password === password) {
                // 验证成功，返回成功信息（前端收到后跳转仪表盘）
                return res.status(200).send({
                    message: '登录成功',
                    user: {
                        id: user.id,
                        username: user.username,
                        mail: user.mail
                    }
                });
            } else {
                // 密码不匹配
                return res.status(401).send('用户名或密码错误');
            }
        }
    );
});

关键步骤说明 #

• 参数获取：通过req.body获取前端POST过来的username和password，和创建账号接口的参数获取逻辑一致。
• 数据库查询：使用SELECT * FROM users WHERE username = ?查询对应用户，用占位符?防止SQL注入。
• 结果校验：
  • 如果查询出错，返回500状态码和服务器错误信息；
  • 如果查询结果为空，说明用户名不存在，返回401状态码和错误提示；
  • 如果找到用户，对比密码（明文仅用于演示，生产环境必须优化），匹配则返回成功信息，不匹配则返回错误。

生产环境安全优化建议 #

• 密码加密存储：当前代码创建账号时明文存储密码，存在严重安全隐患。建议使用bcrypt库对密码进行哈希加密：
  1. 安装依赖：npm install bcrypt
  2. 修改创建账号接口：

     const bcrypt = require('bcrypt');
     // ...
     app.post('/create', async (req, res) => {
         const username = req.body.username;
         const mail = req.body.mail;
         const password = req.body.password;
     
         // 生成盐并哈希密码
         const saltRounds = 10;
         const hashedPassword = await bcrypt.hash(password, saltRounds);
     
         db.query(
             'INSERT INTO users (username, mail, password) VALUES (?, ?, ?)',
             [username, mail, hashedPassword],
             (err, result) => {
                 if (err) {
                     console.log(err);
                     return res.status(500).send('服务器内部错误');
                 }
                 res.send('账号创建成功');
             }
         );
     });
     

  3. 修改登录接口的密码对比逻辑：

     // 替换原密码对比部分
     bcrypt.compare(password, user.password, (compareErr, isMatch) => {
         if (compareErr) {
             console.log(compareErr);
             return res.status(500).send('服务器内部错误');
         }
         if (isMatch) {
             return res.status(200).send({
                 message: '登录成功',
                 user: {
                     id: user.id,
                     username: user.username,
                     mail: user.mail
                 }
             });
         } else {
             return res.status(401).send('用户名或密码错误');
         }
     });
     

• 会话管理：登录成功后，建议使用JWT或Session管理用户会话，避免每次请求重复校验密码。

内容的提问来源于stack exchange，提问作者Jakub Polański