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>
相关文章
|
4月前
|
JavaScript
Vue中如何设置在执行删除等危险操作时给用户提示(二次确认后执行对应的操作)
这篇文章介绍了在Vue项目中如何实现执行删除等危险操作时的二次确认机制,使用Element UI的`el-popconfirm`组件来弹出确认框,确保用户在二次确认后才会执行删除操作。
Vue中如何设置在执行删除等危险操作时给用户提示(二次确认后执行对应的操作)
|
JavaScript
实现 Vue 框架用户短时间内多次点击同一按钮仅触发一次
使用 Vue 框架开发项目中,遇到个问题,就是在用户提交数据时,如果连续多次点击按钮,会触发多次,导致数据异常,因此需要限制用户短时间内多次点击同一按钮,只触发一次。
1131 0
实现 Vue 框架用户短时间内多次点击同一按钮仅触发一次
|
JavaScript
Vue中v-if失效问题(数据更新,页面没有发生变化)
Vue中v-if失效问题(数据更新,页面没有发生变化)
Vue中v-if失效问题(数据更新,页面没有发生变化)
|
JavaScript
|
4月前
|
缓存 UED
清除 Nuxt 状态缓存:clearNuxtState
【8月更文挑战第9天】在Nuxt.js中,适时清除状态缓存对保持数据准确性至关重要。当数据更新或需避免多用户间的数据冲突时,清除缓存可确保显示最新状态。可通过创建插件定义`clearNuxtState`方法实现,如用户操作后重置Vuex状态。组件内也可调用此方法。使用时应注意谨慎操作及考虑性能影响,避免不必要的缓存清除以优化用户体验。
|
5月前
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
138 0
|
5月前
|
JavaScript
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
364 0
|
7月前
|
存储 缓存 JavaScript
vue中缓存页面数据(刷新不丢失)
vue中缓存页面数据(刷新不丢失)
523 1
|
6月前
|
前端开发
React保留和重置状态
React保留和重置状态
|
6月前
|
前端开发 JavaScript
react保留和重置状态
react保留和重置状态

热门文章

最新文章