如何修改现有登录接口，实现单输入框支持用户名或邮箱登录？

核心思路 #

将原有的单一邮箱匹配逻辑，调整为同时支持邮箱或用户名匹配，前端将输入框字段统一命名（比如loginId），后端基于该字段查询用户。

修改后的完整代码 #

//LOGIN
router.post("/login", async (req, res) => {
  try {
    // 从请求体获取统一登录标识（用户名/邮箱）和密码
    const { loginId, password } = req.body;

    // 使用$or操作符，同时匹配邮箱或用户名字段
    const user = await User.findOne({
      $or: [
        { email: loginId },
        { username: loginId }
      ]
    });

    // 未找到匹配用户的情况
    if (!user) {
      return res.status(400).json("Wrong credentials!");
    }

    // 验证密码正确性
    const validated = await bcrypt.compare(password, user.password);
    if (!validated) {
      return res.status(400).json("Wrong credentials!");
    }

    // 剔除密码字段后返回用户信息
    const { password: _, ...others } = user._doc;
    return res.status(200).json(others);
  } catch (err) {
    return res.status(500).json(err);
  }
});

关键改动说明 #

• 前端字段调整：把原输入框的email字段名改为loginId（或其他自定义名称），让用户可自由输入邮箱或用户名。
• 查询逻辑优化：借助MongoDB的$or操作符，同时匹配email和username字段，只要其中一个字段匹配就能找到对应用户。
• 错误处理修复：将原短路判断改为if语句，避免因user为undefined导致后续访问user.password时抛出异常。

可选优化（按需使用） #

如果需要更精准区分输入类型，可以先通过正则校验判断是否为邮箱，再针对性查询：

// 简易邮箱格式校验正则
const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(loginId);
// 根据输入类型选择查询字段
const user = await User.findOne(
  isEmail ? { email: loginId } : { username: loginId }
);

注意：如果你的业务允许用户名包含@符号，该优化不适用，建议直接使用$or方案更稳妥。

内容的提问来源于stack exchange，提问作者sultan.h