vue 离开页面时间_vue 前端页面无操作时，系统退出登录的定时器设计

一、背景

我们平时做系统为了保证用户操作数据的安全性，很多时候当用户长时间不再操作电脑的时候，应该给用户自动退出系统，这样可以防止有别人使用电脑操作上一个用户的数据。

二、设计想法监听鼠标移动以及键盘操作。

设置timer，timer到达指定值后进行跳转并提示。

开启timer并且关闭timer

三、代码实现

设定一个计数值，利用js原生的事件，对鼠标，键盘进行监听，如果一有触发的鼠标，键盘的话，就将计数值清零，否则，计数值一直累加，当累加到一个目标值，即那个无操作退出系统的时间就可以触发退出系统函数。

完整的代码：

data () {

return {

count: 0

}

mounted () {

// 监听鼠标

document.onmousemove = (event) => {

let x1 = event.clientX

let y1 = event.clientY

if (this.x !== x1 || this.y !== y1) {

this.count = 0

}

this.x = x1

this.y = y1

}

// 监听键盘

document.onkeydown = () => {

this.count = 0

}

// 监听Scroll

document.onscroll = () => {

this.count = 0

}

this.setTimer()

// 最后在beforeDestroy()生命周期内清除定时器：

beforeDestroy () {

this.clearTimer()

methods: {

clearTimer () {

clearInterval(window.myTimer)

window.myTimer = null

setTimer () {

this.count = 0

if (!window.myTimer) {

window.myTimer = window.setInterval(this.cookieTimeout, 1000)

}

cookieTimeout () {

// 判断用户5分钟无操作就自动登出

let outTime = 5

this.count++

if (this.count === outTime * 60) {

this.$message({

message: '系统已经五分钟无操作，将在十秒后退出登录，如不想退出系统，请任意操作鼠标键盘...',

type: 'error'

})

setTimeout(this.logout, 10000)

// console.log('aaaa', this.count)

}

logout () {

// console.log('bbb', this.count)

if (this.count >= 5 * 60) {

sessionStorage.setItem('loginname', '')

this.$router.replace({name: 'Login'})

}

功能实现还是相对简单的，仅仅作为记录一下。

vue 离开页面时间_vue 前端页面无操作时，系统退出登录的定时器设计相关推荐

Vue+elementUI从头开始构建前端页面(中篇-Table作妖)
传送门:Vue+elementUI从头开始构建前端页面(前篇-Starter搭建) 传送门:Vue+elementUI从头开始构建前端页面(中篇-Table作妖) 传送门:Vue+elementUI从 ...
无盘服务器怎么安装游戏,看看我在农村网吧做无盘时系统与游戏安装的过程
本帖最后由雨竹于 2011-7-18 10:13 编辑看看我在农村网吧做无盘时系统与游戏安装的过程我是一个小网管,在这个二线城市都算不上的一家小网吧管一些机器,位置蛮小哈,不过事也不多,倒是有 ...
vue埋点记录在前端页面停留时间
import API from '@/modules/system/api/api_userTime' const router = new Router({mode: 'history',base: ...
vue保存页面的值_vue前端页面跳转参数传递及存储
不同页面间进行参数传递,实现方式有很多种,最简单最直接的方式就是在页面跳转时通过路由传递参数,如下所示. 路由传递参数 this.$router.push({ name: '跳入页面', params ...
vue拖拽组件生成前端页面,vue组件拖拽自定义界面
vue如何使用vuex,vuex是vuex.js文件吗 . vue有自己的脚手架构建工具vue-cli,使用起来非常方便,使用webpack来集成各种开发便捷工具,比如:代码热更新,修改代码之后网页无 ...
vue打包部署后，前端页面刷新后丢失
原因: 路由配置里模式不正确找到router文件夹,里边文件中,找到 mode: 'history' 把这行注释掉
vue用户行为收集_Vue前端数据采集埋点追踪用户系列行为
埋点分析,是网站分析的一种常用的数据采集方法.数据埋点分为初级.中级.高级三种方式.数据埋点是一种良好的私有化部署数据采集方式. 埋点技术如何采集数据,有何优缺点? 数据埋点分为初级.中级.高级三种方 ...
vue字符串转时间_vue总结01
Vue也用这么久了,原理之类的文章也看了不少.今天又精读了一篇头条上的文章,自己也总结记录一下.虽然吧,该学vue3了,不过想转React了哈哈.不扯了,还是先总结下Vue这个框架吧. 官方介绍: V ...
解决html页面闪烁,解决前端页面闪烁问题（转载）
修改 Class 而不是 Style 我在不久前做过一个导航栏,要求其滚动到屏幕顶端后固定.很常见.开始的时候没问题,很快就可以搞定. nav { position: absolute; top: 6 ...

vue 离开页面时间_vue 前端页面无操作时，系统退出登录的定时器设计

vue 离开页面时间_vue 前端页面无操作时，系统退出登录的定时器设计相关推荐

最新文章

热门文章