如何为Leave按钮添加功能 实现点击按钮后用户自动登出

核心实现逻辑分两步：给Leave按钮绑定点击监听事件，触发后执行完整登出流程即可。

基础实现（原生JavaScript） #

• 首先匹配页面中的Leave按钮元素，绑定点击事件
• 点击触发后依次执行：调用后端登出接口注销服务端会话、清除前端本地登录缓存、跳转至公开页面（登录页/站点首页）

// 替换为你页面Leave按钮对应的实际选择器，比如class是.leave-btn就改成document.querySelector('.leave-btn')
const leaveButton = document.querySelector('#leave-btn');

leaveButton.addEventListener('click', async () => {
  try {
    // 存在服务端会话的场景，先调用登出接口
    await fetch('/api/user/logout', {
      method: 'POST',
      credentials: 'include'
    });

    // 清理前端所有登录态缓存
    localStorage.removeItem('accessToken');
    localStorage.removeItem('userProfile');
    sessionStorage.clear();
    // 清理cookie存储的登录凭证
    document.cookie = "auth_session=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

    // 跳转至登录页
    window.location.replace('/login');
  } catch (error) {
    console.error('登出流程异常:', error);
    // 此处可添加业务侧的错误提示，比如toast提示用户操作失败
  }
})

常见框架写法参考 #

React 示例 #

import { useNavigate } from 'react-router-dom';

export default function OperationBar() {
  const navigate = useNavigate();

  const handleLeave = async () => {
    // 调用登出接口
    await logoutApi();
    // 清理本地缓存+全局状态
    localStorage.clear();
    // 清空全局用户状态（如果用Redux/Context等状态管理）
    // dispatch(clearUserInfo())
    navigate('/login', { replace: true });
  }

  return <button onClick={handleLeave}>Leave</button>
}

Vue 示例 #

<template>
  <button @click="handleLeave">Leave</button>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const handleLeave = async () => {
  await logoutApi()
  localStorage.removeItem('userToken')
  // 清空Pinia/Vuex存储的用户状态
  // userStore.$reset()
  router.replace('/login')
}
</script>

注意点

• 选择器必须和页面中Leave按钮的实际id/class属性匹配，否则会出现事件绑定失败的问题
• 如果项目使用了全局状态管理存储用户登录信息，登出时必须同步清空对应状态，避免出现状态残留
• 跳转建议使用replace模式，避免用户点击浏览器后退按钮回到需要登录权限的页面

功能效果示意：

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