登录后页面未显示用户名的问题排查与解决咨询

1. 修复signin.html的前端登录脚本 #

原脚本错误在于监听input事件而非表单提交，且未正确处理后端响应。替换为以下代码：

<!-- 在signin.html的表单末尾添加 -->
<script>
document.querySelector('form').addEventListener('submit', async (e) => {
    e.preventDefault(); // 阻止表单默认跳转行为

    // 获取表单输入值（假设表单包含name为username、password的输入框）
    const username = document.querySelector('input[name="username"]').value;
    const password = document.querySelector('input[name="password"]').value;

    try {
        const response = await fetch('/login', { // 替换为你的后端登录接口路径
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ username, password })
        });

        if (!response.ok) throw new Error('登录失败');
        
        const data = await response.json(); // 接收后端返回的用户数据
        localStorage.setItem('username', data.username); // 将用户名存入localStorage
        window.location.href = 'index.html'; // 跳转到首页
    } catch (err) {
        console.error(err.message);
        // 可在此添加登录失败的提示文案
    }
});
</script>

2. 调整Node.js后端登录路由 #

确保后端登录接口返回包含用户名的JSON响应，而非直接重定向（前端AJAX请求无法获取重定向页面的响应数据）：

// 示例Express路由逻辑
app.post('/login', async (req, res) => {
    const { username, password } = req.body;
    // 你的用户校验逻辑（比如从数据库查询用户）
    const user = await User.findOne({ username, password });
    
    if (user) {
        // 返回用户名数据
        res.json({ username: user.username });
    } else {
        res.status(401).json({ message: '用户名或密码错误' });
    }
});

3. 完善replaceWithUsername.js的元素切换逻辑 #

原代码仅隐藏<a>标签，父级按钮容器仍会显示，同时补充退出登录的逻辑：

document.addEventListener('DOMContentLoaded', () => {
    const usernameDisplay = document.querySelector('.usernameDisplay');
    const signOutButton = document.getElementById('signOutButton');
    // 直接选择按钮的父容器，而非内部的a标签
    const signInButton = document.querySelector('.loginbutton a[href="signin.html"]').parentElement;
    const loginButton = document.querySelector('.loginbutton a[href="Login.html"]').parentElement;

    const username = localStorage.getItem('username');

    if (username) {
        usernameDisplay.textContent = username;
        usernameDisplay.style.display = 'block';
        signOutButton.style.display = 'block';

        // 隐藏整个登录/注册按钮容器
        signInButton.style.display = 'none';
        loginButton.style.display = 'none';
    } else {
        console.log('No username found');
    }

    // 退出登录逻辑
    signOutButton.addEventListener('click', () => {
        localStorage.removeItem('username');
        window.location.reload(); // 刷新页面恢复登录按钮
    });
});

4. 验证流程 #

1. 用户在signin.html提交登录表单，前端发送AJAX请求到后端
2. 后端验证通过后返回用户名，前端将其存入localStorage并跳转到index.html
3. index.html加载时，脚本读取localStorage中的用户名，切换导航栏元素显示状态
4. 点击Sign Out按钮时清除localStorage，刷新页面恢复登录按钮

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