当前位置：首页 > VUE

vue实现登出

2026-01-07 19:03:20VUE

实现Vue登出功能

登出功能通常涉及清除用户会话、令牌或本地存储的数据，并重定向到登录页面。以下是几种常见的实现方式：

清除用户令牌和状态 在Vuex的store中定义一个logout mutation，用于清除用户状态：

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

调用登出API 如果后端提供了登出接口，需要先调用该接口：

// api/user.js
export function logout() {
  return request({
    url: '/user/logout',
    method: 'post'
  })
}

处理本地存储 清除本地存储的认证信息：

localStorage.removeItem('token')
sessionStorage.removeItem('userInfo')

路由跳转 登出后重定向到登录页面：

this.$router.push('/login')

完整组件实现示例

在Vue组件中实现登出按钮功能：

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

<script>
import { logout } from '@/api/user'
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['LOGOUT']),
    handleLogout() {
      logout().then(() => {
        this.LOGOUT()
        localStorage.removeItem('token')
        this.$router.push('/login')
      }).catch(error => {
        console.error('登出失败:', error)
      })
    }
  }
}
</script>

处理Token过期自动登出

可以在axios拦截器中实现token过期自动登出：

// utils/request.js
service.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.commit('LOGOUT')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)