登录页面用户信息显示异常：Uncaught TypeError问题求助

错误原因分析 #

你遇到的Cannot read properties of undefined (reading 'username')错误，本质是现有代码默认用户数据是数组格式（比如通过users[0].username访问），但当数据是单个对象时，users[0]会返回undefined，自然无法读取username属性。

解决方案：统一处理两种数据类型 #

核心思路是先判断用户数据的类型，再根据类型提取有效的用户对象，之后执行登录验证和跳转逻辑。

1. 登录页核心代码修改

假设你原来的登录验证逻辑针对数组设计，修改后兼容两种格式：

// 获取用户输入的账号密码
const inputUsername = document.getElementById('username-input').value;
const inputPassword = document.getElementById('password-input').value;

// 存储验证通过的用户
let validUser;

// 判断用户数据类型并处理
if (Array.isArray(users)) {
  // 数组格式：查找匹配账号密码的用户
  validUser = users.find(user => 
    user.username === inputUsername && user.password === inputPassword
  );
} else {
  // 对象格式：直接验证当前对象的账号密码
  if (users.username === inputUsername && users.password === inputPassword) {
    validUser = users;
  }
}

// 验证通过则跳转并传递用户名
if (validUser) {
  // 用URL参数传递用户名，避免页面刷新后丢失数据
  window.location.href = `welcome.html?username=${encodeURIComponent(validUser.username)}`;
} else {
  alert('账号或密码错误');
}

2. Welcome页显示用户名的代码

在welcome.html中，通过URL参数获取并显示用户名：

// 解析URL参数
const urlParams = new URLSearchParams(window.location.search);
const username = urlParams.get('username');

// 渲染用户名（假设页面有id为welcome-name的元素）
if (username) {
  document.getElementById('welcome-name').textContent = `欢迎你，${username}！`;
}

额外优化建议 #

• 如果数组中存在多个用户，务必使用find匹配输入的账号密码，不要直接取数组第一个元素，否则会出现登录逻辑错误。
• 使用encodeURIComponent处理用户名，避免用户名包含特殊字符（如空格、中文）导致URL解析失败。
• 可增加前置判断，确保users不是null或undefined，提升代码健壮性：

  if (!users) {
    alert('用户数据加载失败');
    return;
  }
  

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