我在头文件(index.html文件)中有以下部分:
<div class="rightsidetext">
<div class="usernameDisplay" style="display: none;"></div>
<div class="loginbutton" id="signOutButton" style="display: none;">
<a href="#">Sign Out</a>
</div>
<div class="loginbutton"><a href="signin.html">Sign in</a></div>
<div class="loginbutton"><a href="Login.html">Log in</a></div>
</div>
字符串
当网站加载的第一次,登录和登录按钮显示。用户登录后,我希望这两个按钮将被替换为各自的用户名和注销按钮。
在链接到index.html的js文件(replaceWithUsername.js)中,我有:
document.addEventListener('DOMContentLoaded', () => {
const usernameDisplay = document.querySelector('.usernameDisplay');
const signOutButton = document.getElementById('signOutButton');
const signInButton = document.querySelector('.loginbutton a[href="signin.html"]');
const loginButton = document.querySelector('.loginbutton a[href="Login.html"]');
// Retrieve username from localStorage
const username = localStorage.getItem('username');
if (username) {
// Show username and sign out button
usernameDisplay.textContent = username;
usernameDisplay.style.display = 'block';
signOutButton.style.display = 'block';
// Hide sign-in and log-in buttons
signInButton.style.display = 'none';
loginButton.style.display = 'none';
} else {
console.log('No username found');
}
});
型
在signin.html的末尾,我有:
<script>
document.addEventListener('DOMContentLoaded', function() {
const inputField = document.getElementById('wantedSpace');
// Listen for changes in the input field
inputField.addEventListener('input', function(event) {
const username = event.target.value; // Get the value entered by the user
if (response.status == 200) {
console.log('Username found:', username);
// Set username in localStorage
localStorage.setItem('isLoggedIn', true);
localStorage.setItem('username', username);
// Redirect to index.html
window.location.href = '/allPages/index.html';
} else {
console.error('Login failed. Please try again.');
}
});
});
</script>
型
用户放置其用户名的HTML是:
<input type="text" name="usernameOrEmail" placeholder="Username or Email" class="login_page_input" id="wantedSpace">
型
此外,我还有登录路由(在node.js中,它连接到一个mongoDB电池):
app.post('/login', async (req, res) => {
const { usernameOrEmail, password } = req.body;
try {
// Find user by username or email
const user = await User.findOne({ $or: [{ username: usernameOrEmail }, { email: usernameOrEmail }] });
if (!user) {
return res.status(404).redirect('/allPages/registration_feedback/sign_in_feedback/userNotFound.html');
}
// Compare entered password with hashed password
const passwordMatch = await bcrypt.compare(password, user.password);
if (!passwordMatch) {
return res.status(401).redirect('/allPages/registration_feedback/sign_in_feedback/incorrectPassword.html');
}
console.log('Loged in user:', user);
const token = generateToken(user);
return res.status(200).redirect('/allPages/index.html');
} catch (err) {
console.error('Login error:', err);
return res.status(500).json({ error: 'Login failed. Please try again.' });
}
});
型
在我登录一个用户后,在VSC终端中我确实得到了该用户的坐标,但在浏览器中导航栏保持不变(有登录和登录按钮,没有ussername),并且在控制台中显示以下消息:
第一个月
如何使用户名显示在页面上?
1条答案
按热度按时间yjghlzjz1#
问题在于在本地存储中正确设置和检索用户名:用户名必须在成功登录后存储,然后检索以更新index.html中的UI。JavaScript代码需要正确隐藏“登录”和“登录”按钮,同时基于此登录状态显示用户名和“注销”按钮。
字符串