js实现登陆和注销

<form id="loginForm">
  <input type="text" id="username" placeholder="用户名" required>
  <input type="password" id="password" placeholder="密码" required>
  <button type="submit">登录</button>
</form>

document.getElementById('loginForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  // 发送登录请求到后端API
  fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password })
  })
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      // 登录成功，保存token到localStorage
      localStorage.setItem('userToken', data.token);
      // 更新UI，显示登录后的状态
    } else {
      // 登录失败，显示错误信息
      alert(data.message);
    }
  })
  .catch(error => console.error('Error:', error));
});

function logout() {
  // 清除localStorage中的用户token
  localStorage.removeItem('userToken');
  // 更新UI，显示登录前的状态
}

// 假设有一个注销按钮
document.getElementById('logoutButton').addEventListener('click', logout);

function logout() {
  const token = localStorage.getItem('userToken');
  if (token) {
    // 发送注销请求到后端API
    fetch('/api/logout', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${token}`
      }
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        // 后端注销成功，清除localStorage中的用户token
        localStorage.removeItem('userToken');
        // 更新UI，显示登录前的状态
      }
    })
    .catch(error => console.error('Error:', error));
  }
}