网页上长时间无操作退出登录，返回登录页

最新推荐文章于 2024-05-21 16:43:27 发布

喔烨鸭

最新推荐文章于 2024-05-21 16:43:27 发布

阅读量271

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_45432996/article/details/137246502

版权

文章介绍了如何在Vue组件中实现用户在30分钟内无鼠标操作后自动登出的功能，利用`localStorage`存储上一次操作时间，通过监听鼠标点击事件更新时间，并在超过设定时间后重定向至登录页面。在离开页面时，通过`beforeDestroy`钩子清除定时器。

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

data() {
    return {
      interval: null
    }
},
mounted() {
    localStorage.setItem('lastTime', new Date().getTime())
    this.addOn()
},
beforeDestroy() {
    window.clearInterval(this.interval)
},
 methods: {
    addOn() {
      var lastTime = new Date().getTime()
      var currentTime = new Date().getTime()
      var timeOut = 30 * 60 * 1000; // 设置超时时间： 30分

      window.document.onmousedown = function() {
        localStorage.setItem('lastTime', new Date().getTime())
      }
      function checkTimeout() {
        currentTime = new Date().getTime() // 更新当前时间
        lastTime = localStorage.getItem('lastTime')
        if (currentTime - lastTime > timeOut) { // 判断是否超时
          var url = window.location.href
          var newUrl = url.match(/(\S*)#/)[1]
          removeToken()
          window.open(newUrl + '#/login', '_self')
        }
      }
      /* 定时器 间隔30秒检测是否长时间未操作页面 */
      this.interval = window.setInterval(checkTimeout, 30*1000)
    }
  }

该页面时Layout布局中的,login页面是不引用的,
思路,在该页面mounted时设置一个时间，增加一个监听事件
每按下鼠标时，更新一次时间
每隔30s判断一次上次按下鼠标据现在时间间隔,如果超过了30分钟，清空定时器
清空token,将其返回到登录页面。
那么beforeDestroy()中是为了人为操作退出登录，然后清空定时器