纯前端跳转根本不会真正销毁服务端会话，用户点完链接，session 还在服务器上挂着，token 也没失效，刷新页面照样能进。这不是登出，是“假装退出”。

真实登出必须触发服务端清理逻辑，常见错误是只清了前端 localStorage 或删了 cookie，却没调用后端 /logout 接口。

这是目前最可控、最通用的方式，能确保请求携带凭证（如 cookie），并等待服务端明确返回成功后再跳转或清本地状态。

示例代码（假设后端接受 JSON 并返回 { "ok": true }）：

document.getElementById('logout-btn').addEventListener('click', async () => {
  try {
    const res = await fetch('/api/logout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include' // 关键：带上 cookie
    });
    if (res.ok) {
      localStorage.removeItem('auth_token');
      location.href = '/login';
    }
  } catch (e) {
    console.error('登出失败', e);
  }
});

• credentials: 'include' 必须加，否则 cookie 不会随请求发出
• 不要用 GET，避免被缓存或预加载；POST 或 DELETE 更合理
• 登出成功后，再跳转或清本地存储，顺序不能反——否则可能清早了，服务端还没响应

按钮本身怎么写？语义和可访问性不能丢

后端配合要点：别只删 session，还要处理 token 和缓存

前端再规范，后端漏一步，登出就不完整。常见疏漏点：

• JWT 场景下，服务端通常不“删除” token（无状态），但应把该 token 加入短期黑名单（如 Redis 存 blacklist:），否则登出后 token 仍有效
• 使用 express-session 时，调 req.session.destroy() 后，记得手动清除 Set-Cookie 响应头里的 session ID
• 如果用了多端登录，登出需通知其他设备（如发消息到 WebSocket 或 MQ），否则手机端还挂着
• 某些 CDN 或反向代理会缓存 /logout 响应，导致返回 200 却没真执行，务必设置 Cache-Control: no-store

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML退出登录按钮怎么实现》文章吧，也可关注golang学习网公众号了解相关技术文章。