HTML5加登录功能怎么实现

<form id="loginForm">
  &lt;input type=&quot;text&quot; id=&quot;username&quot; required&gt;
  &lt;input type=&quot;password&quot; id=&quot;password&quot; required&gt;
  <button type="submit">登录</button>
</form>

<script>
document.getElementById("loginForm").addEventListener("submit", function(e) {
  e.preventDefault(); // 关键：阻止默认提交
  const u = document.getElementById("username").value;
  const p = document.getElementById("password").value;
  if (u === "admin" && p === "pass123") {
    localStorage.setItem("isLoggedIn", "true");
    location.href = "dashboard.html";
  } else {
    alert("用户名或密码错误");
  }
});
</script>

• e.preventDefault() 必须存在，否则浏览器会尝试提交到空地址或刷新
• 密码比较逻辑不能硬编码在前端，仅用于本地测试；上线必须移除
• localStorage 只是标记“已登录”，不等于身份认证，关掉浏览器再开仍算登录——这不是漏洞，而是它本来的设计定位

要真登录，必须调用后端接口（如 /api/login）

真实项目中，登录按钮触发的是一个 fetch 请求，把账号密码发给服务器，由服务器查数据库、验密码、签发 token。前端只负责传参和处理响应：

<script>
async function doLogin() {
  const res = await fetch("/api/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      username: document.getElementById("username").value,
      password: document.getElementById("password").value
    })
  });
  const data = await res.json();
  if (res.ok && data.token) {
    localStorage.setItem("authToken", data.token);
    location.href = "/app/";
  } else {
    alert(data.message || "登录失败");
  }
}
</script>

• /api/login 这个路径必须由你部署的后端提供，静态 HTML 本身无法响应它
• 浏览器会拦截跨域请求（比如你在 file:/// 打开 HTML，再请求 http://localhost:3000/api/login），必须用本地服务器启动（如 python3 -m http.server 或 live-server）
• 服务端返回的 token 后续请求需放在 Authorization 请求头里，不是存进 localStorage 就完事了

本地开发时，绕过 CORS 和无后端的临时方案

如果只是想快速验证前端流程，又没搭后端，可用以下方法过渡：

• 用 curl 或 Postman 手动调 POST /api/login，确认后端通了再联前端
• 浏览器安装插件如 CORS Unblocked（仅开发用，禁用它再测试正式环境）
• 改用 http-server 启动（npx http-server），再配代理：在 package.json 中加 "proxy": "http://localhost:4000"（需配合 create-react-app 类工具）
• 最简替代：把登录页改成 login.php，用 PHP 做最基础的 $_POST 处理——哪怕只返回 {"ok":true}，也比纯 HTML 走得通

真正卡住人的往往不是怎么写 if，而是没分清「页面能跑」和「登录能验」是两件事。静态资源服务器不等于应用服务器，这点不厘清，所有“加登录”的尝试都会停在第一步。

本篇关于《HTML5加登录功能怎么实现》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！