当前位置：首页 > VUE

实现登录踢出 vue

2026-02-11 05:03:11VUE

实现登录踢出功能的 Vue 方案

方案一：基于路由守卫的全局控制

在 router/index.js 中设置全局前置守卫，检查用户登录状态。若检测到重复登录或强制踢出，可跳转到登录页并清除本地存储的 token。

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else if (isAuthenticated && to.path === '/login') {
    // 已登录用户尝试访问登录页时强制登出
    localStorage.removeItem('token')
    next('/login')
  } else {
    next()
  }
})

方案二：WebSocket 实时通信

建立 WebSocket 连接，服务器在检测到账号在其他地方登录时主动推送消息：

// 在App.vue或全局入口文件中
created() {
  const ws = new WebSocket('wss://your-api/ws')
  ws.onmessage = (event) => {
    if (event.data === 'FORCE_LOGOUT') {
      this.$store.dispatch('logout')
      this.$router.push('/login')
    }
  }
}

方案三：定时轮询检查

实现登录踢出 vue

设置定时器定期检查登录状态：

// 在用户登录后的页面组件中
data() {
  return {
    checkInterval: null
  }
},
mounted() {
  this.checkInterval = setInterval(() => {
    axios.get('/api/check-session').catch(err => {
      if (err.response.status === 401) {
        clearInterval(this.checkInterval)
        this.$store.commit('LOGOUT')
        this.$router.push('/login')
      }
    })
  }, 30000) // 每30秒检查一次
},
beforeDestroy() {
  clearInterval(this.checkInterval)
}

方案四：Vuex 状态管理集成

在 Vuex store 中集中管理登录状态：

实现登录踢出 vue

// store/modules/auth.js
const actions = {
  forceLogout({ commit }) {
    commit('CLEAR_TOKEN')
    commit('CLEAR_USER')
    // 可添加重定向逻辑
  }
}

方案五：Token 过期自动处理

在 axios 拦截器中处理 401 未授权响应：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.dispatch('logout')
      router.push('/login?reason=expired')
    }
    return Promise.reject(error)
  }
)

注意事项