vue实现登出

实现 Vue 登出功能

核心逻辑
登出功能通常涉及清除用户凭证（如 Token）、跳转至登录页并重置应用状态。以下是具体实现方式：

清除用户凭证

前端需删除本地存储的认证信息（如 Token 或用户数据），常见存储方式包括：

• localStorage.removeItem('token')
• sessionStorage.clear()
• 若使用 Vuex，需重置相关状态：

  // store/modules/user.js
  mutations: {
    LOGOUT(state) {
      state.token = null
      state.userInfo = {}
    }
  }

调用后端登出接口（可选）

某些系统要求通知服务端销毁会话：

axios.post('/api/logout').then(() => {
  // 清除前端状态
})

路由跳转至登录页

使用 Vue Router 重定向：

this.$router.push('/login')
// 或替换当前历史记录
this.$router.replace('/login')

完整组件示例

<template>
  <button @click="handleLogout">退出登录</button>
</template>

<script>
export default {
  methods: {
    async handleLogout() {
      try {
        await this.$store.dispatch('user/logout')
        this.$router.push('/login')
      } catch (error) {
        console.error('登出失败:', error)
      }
    }
  }
}
</script>

状态管理整合（Vuex）

在 store 中集中处理登出逻辑：

// store/actions.js
actions: {
  logout({ commit }) {
    commit('LOGOUT')
    localStorage.removeItem('token')
    return Promise.resolve()
  }
}

注意事项

• 安全清理：检查所有可能的存储位置（如 Cookies、IndexedDB）。
• 拦截器处理：若使用 axios 拦截器，登出后需取消未完成的认证请求。
• 路由守卫：配合 router.beforeEach 检查认证状态，防止未授权访问。