统一身份认证系统
小明: 嗨，小红，我最近在研究如何在前端实现一个统一的身份认证系统，你能给我一些建议吗？
小红: 当然可以，小明。首先，你需要考虑的是如何让用户登录和注册。你可以使用JWT（JSON Web Tokens）来处理用户的认证状态。
小明: 那么，我们怎么开始呢？
小红: 我们可以从一个简单的登录页面开始。这里是一个基本的HTML表单:
<form id="loginForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<button type="submit">登录</button>
</form>
小明: 明白了，接下来我们需要添加JavaScript来处理表单提交，对吧？
小红: 是的，你可以使用Fetch API来发送请求到后端。下面是一个例子：
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
fetch('/api/login', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({username, password})
})
.then(response => response.json())
.then(data => {
if (data.token) {
localStorage.setItem('token', data.token);
window.location.href = '/dashboard';
}
});
});
小明: 看起来很清晰，那我们怎么处理用户资料的管理呢？
小红: 对于用户资料管理，你可以在前端创建一个用户资料页面，允许用户查看和更新他们的信息。例如：
<div id="profile">
<p>用户名: <span id="username"></span></p>
<p>电子邮件: <span id="email"></span></p>
<button onclick="editProfile()">编辑</button>
</div>
小明: 非常感谢你的帮助，小红！我现在有了一个清晰的方向。
