VUE实现长时间未操作退出登录

宇智波波奶茶

已于 2023-04-21 09:21:01 修改

阅读量1.4k

点赞数 3

文章标签： vue.js javascript 前端

于 2023-04-20 16:27:26 首次发布

本文链接：https://blog.csdn.net/layonly/article/details/130269501

版权

该文描述了如何在Vue.js应用中实现一个30分钟无操作后自动退出登录的功能。通过在App.vue组件中设置定时器，监听用户的鼠标点击事件来重置计时器。当定时器结束时，执行登出操作，包括清除token、刷新路由和显示登录提示。

摘要由CSDN通过智能技术生成

背景：在现在大多系统中，为了保障用户的安全，都会有固定时间未操作则自动退出登录的功能，这里根据我目前了解的内容大致实现一个简单的。

我的想法是这样，通过对定时器setTimeOut的使用，来进行倒计时30分钟，到30分钟后触发登出的操作，如果在这期间进行点击鼠标的动作，则重置此定时器。

因为在所有的界面都需要进行这个操作，所以我直接放在App.vue中进行编写

<template>
<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>
</template>

<script>
export default {
  name: 'app',
 //定义一个计时器
  data() {
    return {
      myTimer: null
    }
  },
  //设置监听事件，从登录界面跳转到首页的时候就进行触发
  watch: {
    '$route.path': function (){
      this.myTimeOut()
    }
  },
  //在钩子函数中设置一个全局监听，如果有点击鼠标的动作，则调用myTimeOut方法
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('mousedown',this.myTimeOut)
    })
  },
  methods: {
    myTimeOut(){
      //因为登录界面不需要进行校验，所以将它排除在外
      let path = ['/aes/login','/']
      if (!path.includes(this.$route.path)) {
        console.log('--------计时器--------')
        //首先需要清楚原有的计时器，如果不清除的话无法做到重置
        clearTimeout(this.myTimer)
        //这里设置一个新的计时器，并赋给myTimer
        this.myTimer = setTimeout(() => {
          // 在这执行登出的操作，具体情况参考您的系统中
          this.$store.dispatch('removeToken')
          this.$store.dispatch('removeRoutes')
          this.$router.push('/aes/login')
          //设置弹窗，提示过期
          window.alert('您的登录已经过期！')
          // 三十分钟
        }, 1000 * 60 * 30)
      }
    }
  }
}
</script>

<style lang="less">
</style>

最后虽然实现了，不过我感觉这种方法并不好，如各位大佬有更好的方法，欢迎指导！！！