vue实现退出功能

Vue 实现退出功能的方法

在 Vue 中实现退出功能通常涉及清除用户会话、跳转登录页面或重置应用状态。以下是几种常见实现方式：

使用 Vue Router 跳转登录页

methods: {
  logout() {
    // 清除用户 token 或会话
    localStorage.removeItem('token')
    // 跳转到登录页
    this.$router.push('/login')
  }
}

结合 Vuex 状态管理

// store.js
const actions = {
  logout({ commit }) {
    commit('CLEAR_USER_DATA')
    localStorage.removeItem('token')
    router.push('/login')
  }
}

// 组件中调用
this.$store.dispatch('logout')

使用 axios 拦截器处理退出

// 在 axios 响应拦截器中检测 401 未授权状态
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.dispatch('logout')
    }
    return Promise.reject(error)
  }
)

清除所有 localStorage

methods: {
  clearAllStorage() {
    localStorage.clear()
    sessionStorage.clear()
    this.$router.push('/login')
  }
}

使用第三方认证库退出

// 如 Firebase 退出
import { auth } from '@/firebase'
methods: {
  async logout() {
    try {
      await auth.signOut()
      this.$router.push('/login')
    } catch (error) {
      console.error(error)
    }
  }
}

注意事项

• 退出时建议清除所有相关存储数据
• 对于 SPA 应用，需要重置 Vuex 中的用户状态
• 考虑添加退出确认对话框提升用户体验
• 根据实际项目需求选择适合的退出策略