JavaScript登录应用：JSON数据遍历的性能优化与登录验证问题

核心疑问解答 #

首先明确：理想状态下绝对不应该在前端遍历所有用户数据——这不仅存在性能隐患（用户量越大越明显），更严重的是安全问题：所有用户的敏感信息（比如密码）会直接暴露在浏览器中，极易被窃取。

如果你的API暂时只能返回全量用户数据，那遍历是无奈的选择，但可以做优化减少性能损耗；最优方案是修改API逻辑，把验证逻辑放在后端。

现有代码的问题 #

当前代码存在几个关键错误：

1. 循环遍历的是users（API地址字符串），不是接口返回的data数组，根本无法匹配用户
2. 循环中每遇到一个不匹配的用户就立即显示错误信息，会导致只要第一个用户不匹配就弹错，而非遍历完所有用户再判断结果
3. 密码明文传输、在前端处理，存在极高的安全风险

最优实现方案 #

方案一：修改API逻辑（强烈推荐） #

让后端API支持接收用户名和密码，在后端完成验证，前端只需要发送用户输入的凭证，后端返回验证结果：

async function login() {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;

  try {
    const response = await fetch('http://webbred2.utb.hb.se/~fewe/api/api.php?action=login', {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ username, password })
    });

    const result = await response.json();
    if (result.success) {
      window.location.href = "quiz.html";
    } else {
      document.getElementById("message").innerHTML = "Incorrect username or password";
    }
  } catch (error) {
    console.error(error);
    document.getElementById("message").innerHTML = "An error occurred";
  }
}

这种方式下，前端无需处理任何用户列表，性能最优，且敏感数据不会暴露在前端，安全性完全达标。

方案二：API无法修改时的前端优化 #

如果API只能返回全量用户数据，修复并优化代码如下：

async function login() {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  const apiUrl = 'http://webbred2.utb.hb.se/~fewe/api/api.php?data=students';

  try {
    // 仅获取用户列表无需POST请求，直接GET即可
    const response = await fetch(apiUrl);
    const userList = await response.json();

    // 用find方法找到匹配项后立即停止遍历，避免无效循环
    const matchedUser = userList.find(user => user.username === username && user.password === password);

    if (matchedUser) {
      window.location.href = "quiz.html";
    } else {
      document.getElementById("message").innerHTML = "Incorrect username or password";
    }
  } catch (error) {
    console.error(error);
    document.getElementById("message").innerHTML = "An error occurred";
  }
}

大用户量场景额外优化

如果用户数量较多，可以把用户列表转成以用户名为键的对象，后续验证可以做到O(1)时间复杂度：

// 将用户列表转为映射对象
const userMap = {};
userList.forEach(user => {
  userMap[user.username] = user.password;
});

// 验证时直接查找
if (userMap[username] === password) {
  window.location.href = "quiz.html";
} else {
  document.getElementById("message").innerHTML = "Incorrect username or password";
}

HTML代码优化建议 #

原有HTML可以保留，建议做两点优化：

1. 给输入框添加required属性，避免空提交
2. 改用事件监听绑定登录逻辑，更符合现代JS实践：

<!DOCTYPE html>
<html lang="sv" dir="ltr">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>Login Kursöversikt</title>
  <script src="index.js"></script>
</head>
<body>
  <div class="login">
    <h1>Logga in här för kursöversikt!</h1>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required><br><br>
    <!-- 去掉onclick，改用ID绑定 -->
    <input type="button" value="Login" id="loginBtn">
  </div>
  <p id="message"></p>
  <script>
    // 绑定登录事件
    document.getElementById("loginBtn").addEventListener("click", login);
  </script>
</body>
</html>

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