vue-element-template 后台管理设置超时自动退出登录

最新推荐文章于 2025-10-23 01:27:50 发布

原创最新推荐文章于 2025-10-23 01:27:50 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #element

Vue 专栏收录该内容

39 篇文章

订阅专栏

本文介绍如何在Vue项目中实现用户长时间无操作后自动注销的功能，通过监听页面点击事件更新最后操作时间，并在超过设定时间后调用注销逻辑，确保用户安全性。

简单实现，修改app.vue文件即可

<template>
  <div id="app"  @click="clicked">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data (){
    return {
        clickTime: new Date().getTime(),
        tOut: 5 * 60 * 1000
    }
  },
  methods:{
    clicked () {
      // console.log(new Date().getTime() - this.clickTime)
      if ((new Date().getTime() - this.clickTime) > this.tOut) {
        if (this.$store.getters.token) {
          this.$store.dispatch('FedLogOut').then(() => {
            this.$alert('超时未操作，请重新登录。', '提示', {
              confirmButtonText: '确定'
            }).then(() => {
              location.reload()
            })
          })
        }
      }
      this.clickTime = new Date().getTime() 
    },
  },
}
</script>