Vue2无操作半小时后自动清除登录状态

简介: 这篇文章介绍了如何在Vue应用中实现当用户半小时无操作后自动清除登录状态的功能,通过监听鼠标、键盘或滚动事件来重置过期时间。

Vue登录后,用户无操作半小时后自动清除登录状态,如果有操作则重置过期时间为半小时后过期

在项目的页面入口文件App.vue文件中监听用户最后一次操作鼠标、键盘或滚动事件:

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
// 登录状态使用store插件保存在客户端的localStorage中
import storage from 'store'
export default {
  name: 'App',
  computed: {
    token () {
      return storage.get('TOKEN')
    },
    uid () {
      return storage.get('UID')
    },
    userInfo () {
      return storage.get('USER_INFO')
    }
  },
  mounted () {
    document.onmousemove = this.debounce(this.resetStatus, 3000)
    document.onkeydown = this.debounce(this.resetStatus, 3000)
    document.onscroll = this.debounce(this.resetStatus, 3000)
  },
  methods: {
    // 使用防抖,对于短时间内(此处是3s)连续触发的事件,只执行最后一次
    debounce (fn, delay) {
      let timer = null
      return function () {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(fn, delay)
      }
    },
    resetStatus () { // 重置store插件自动清除时间
      if (this.token) {
        storage.set('TOKEN', this.token, new Date().getTime() + 30 * 60 * 1000)
        storage.set('UID', this.uid, new Date().getTime() + 30 * 60 * 1000)
        storage.set('USER_INFO', this.userInfo, new Date().getTime() + 30 * 60 * 1000)
      }
    }
  }
}
</script>
<style lang="less" scoped>
#app {
  min-height: 100vh;
  min-width: 1200px;
  margin: 0 auto;
}
</style>
相关文章
|
JavaScript 前端开发 开发者
正则表达式深度解析:斜杠的妙用
【2月更文挑战第29天】
2372 0
正则表达式深度解析:斜杠的妙用
|
JavaScript
VUE里的find与filter使用与区别
VUE里的find与filter使用与区别
1332 0
|
安全 前端开发 Windows
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
本文介绍了 Electron 应用在 Windows 中的更新原理,重点分析了 `NsisUpdater` 类的实现。该类利用 NSIS 脚本,通过初始化、检查更新、下载更新、验证签名和安装更新等步骤,确保应用的更新过程安全可靠。核心功能包括差异下载、签名验证和管理员权限处理,确保更新高效且安全。
365 4
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
1063 29
|
机器学习/深度学习 数据采集
深度学习中的模型优化:策略与实践
【9月更文挑战第9天】本文深入探讨了在深度学习领域,如何通过一系列精心挑选的策略来提升模型性能。从数据预处理到模型架构调整,再到超参数优化,我们将逐一剖析每个环节的关键因素。文章不仅分享了实用的技巧和方法,还提供了代码示例,帮助读者更好地理解和应用这些优化技术。无论你是深度学习的初学者还是有经验的研究者,这篇文章都将为你提供宝贵的参考和启示。
在 setup 函数中使用 computed 计算属性
【10月更文挑战第23天】在 Vue3 中,`computed` 计算属性为我们提供了一种方便且高效的方式来处理基于其他响应式数据的派生数据。在 `setup` 函数中使用 `computed` 计算属性,可以让我们更好地组织和管理组件的逻辑。
|
监控 JavaScript
成功解决:[‘‘, ‘‘, __ob__: Observer]
这篇文章介绍了Vue框架中数组出现`__ob__: Observer`属性的原因和解决方法,说明了Vue如何通过观察者模式实现数据与视图的双向绑定,并提供了如何避免数组被Vue接管导致无法取值的解决方案。
成功解决:[‘‘, ‘‘, __ob__: Observer]
|
JavaScript
vue项目打包后自动压缩成zip文件
vue项目打包后自动压缩成zip文件
803 0
|
JSON JavaScript 前端开发
js将json字符串还原为json对象
【5月更文挑战第14天】js将json字符串还原为json对象
300 1