如何使用JavaScript实现用户密码认证？附登录页代码示例

嘿，我看你正在搭建登录模块的核心认证逻辑，结合你目前的代码结构，我来给你梳理一套可行的实现方案，一步步来搞定：

1. 先补全登录表单的HTML结构 #

你提供的代码有点截断了，我先帮你补全一个完整的、可交互的登录表单，方便后续绑定逻辑：

<script src="../models/Auth.js" type="text/javascript"></script>
<body>
  <div class="login-box">
    <h1>Login here</h1>
    <form id="loginForm">
      <p>Username</p>
      <input type="text" id="usernameInput" placeholder="Enter your username" required>
      <p>Password</p>
      <input type="password" id="passwordInput" placeholder="Enter your password" required>
      <button type="submit">Login</button>
      <!-- 用于显示认证结果的提示框 -->
      <p id="authMessage" style="margin-top:1rem;"></p>
    </form>
  </div>
</body>

2. 编写前端认证逻辑的JavaScript代码 #

接下来我们给表单绑定提交事件，处理输入、调用认证模块、反馈结果：

// 获取页面元素
const loginForm = document.getElementById('loginForm');
const usernameInput = document.getElementById('usernameInput');
const passwordInput = document.getElementById('passwordInput');
const authMessage = document.getElementById('authMessage');

// 监听表单提交
loginForm.addEventListener('submit', async (e) => {
  // 阻止表单默认跳转行为
  e.preventDefault();
  
  // 获取并格式化输入值
  const username = usernameInput.value.trim();
  const password = passwordInput.value.trim();
  
  // 前端基础校验（避免空提交）
  if (!username || !password) {
    authMessage.textContent = '请填写完整的用户名和密码';
    authMessage.style.color = '#dc3545';
    return;
  }
  
  try {
    // 调用你引入的Auth模块的登录方法
    const authResult = await Auth.login(username, password);
    
    // 根据认证结果处理
    if (authResult.success) {
      // 登录成功：存储用户状态、跳转页面
      authMessage.textContent = '登录成功！正在跳转...';
      authMessage.style.color = '#28a745';
      // 把用户信息/token存在本地存储，方便后续页面使用
      localStorage.setItem('currentUser', JSON.stringify(authResult.user));
      // 示例：跳转到项目主页
      setTimeout(() => {
        window.location.href = '/dashboard.html';
      }, 1500);
    } else {
      // 登录失败：显示错误信息
      authMessage.textContent = authResult.message || '用户名或密码错误';
      authMessage.style.color = '#dc3545';
    }
  } catch (error) {
    // 处理网络异常或其他错误
    authMessage.textContent = '登录失败，请稍后重试';
    authMessage.style.color = '#dc3545';
    console.error('登录过程出错：', error);
  }
});

3. 完善Auth.js模块的认证方法 #

你引入的Auth.js需要提供核心的认证逻辑，这里给你一个示例实现（实际项目中要替换成真实的后端接口请求）：

// ../models/Auth.js
const Auth = {
  // 异步登录方法，模拟后端接口请求
  async login(username, password) {
    // 实际项目中，这里要用fetch/axios调用后端的登录接口
    // 示例：模拟用户数据和网络延迟
    const mockValidUsers = [
      { username: 'colleague1', password: 'teamProject123', id: 1, name: 'Alice' },
      { username: 'colleague2', password: 'frontendDev456', id: 2, name: 'Bob' }
    ];
    
    // 模拟网络请求的等待时间
    await new Promise(resolve => setTimeout(resolve, 700));
    
    // 查找匹配的用户（实际项目中这一步是后端做的！）
    const matchedUser = mockValidUsers.find(
      user => user.username === username && user.password === password
    );
    
    if (matchedUser) {
      // 返回成功结果，后端通常会返回JWT Token
      return {
        success: true,
        user: { id: matchedUser.id, username: matchedUser.username, name: matchedUser.name },
        token: 'mock-jwt-token-xxx' // 真实项目由后端生成
      };
    } else {
      return {
        success: false,
        message: '用户名或密码不正确'
      };
    }
  }
};

// 把Auth对象挂载到全局，让前端代码可以访问
window.Auth = Auth;

关键注意事项 #

• 安全第一：实际项目中，绝对不要在前端做密码校验（除了格式检查），所有的密码验证必须在后端完成，且要用HTTPS传输数据，后端存储密码时要做哈希加密（比如bcrypt）。
• 错误处理：要覆盖各种异常情况，比如网络断开、后端返回500错误等，给用户友好的提示。
• 状态持久化：登录成功后，把后端返回的token存在localStorage或sessionStorage里，后续请求接口时在请求头里带上token。
• 表单体验：可以添加加载状态（比如按钮变成“登录中...”），提升用户体验。

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