Vue 实现登陆后长时间未点击自动退出登录
之前写前端都是用最基本的JSP,和JS代码,没有接触框架,所以有许多的困惑,不知道代码怎么写具体的实现思路如下;当前时间 - 最后一次点击的时间 > 超时时间当鼠标点击的时候,最后一次点击时间更新前端不断的刷新当前时间并最后一次点击时间进行比较,若大于超时时间则判断用户是否在登录状态,若在登录状态退出登录,其中,登录状态由sessionStorage保存 关于App.vu...
·
之前写前端都是用最基本的JSP,和JS代码,没有接触框架,所以有许多的困惑,不知道代码怎么写
具体的实现思路如下;当前时间 - 最后一次点击的时间 > 超时时间
当鼠标点击的时候,最后一次点击时间更新
前端不断的刷新当前时间并最后一次点击时间进行比较,若大于超时时间则判断用户是否在登录状态,若在登录状态退出登录,其中,登录状态由sessionStorage保存
- 关于App.vue:App.vue是Vue项目的主组件,所有的页面都是在App.vue下进行切换的,其切换的方法主要是通过router.js下的路径进行切换的。所以当App.vue的div被点击后,更新最后一次点击时间,可以实现监听所有页面是否被监听
<template>
<div id="app" @click="clicked">
// TO DO
</div>
</template>
- 关于mounted:
1.钩子函数:钩子函数是Windows消息处理机制的一部分,通过设置“钩子”,应用程序可以在系统级对所有消息、事件进行过滤、访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统
2.相对于前端来说,钩子函数就是指所有函数执行前,我先执行了函数,即勾住我感兴趣的函数,只要它执行,我就先执行
3.与created相比:mounted主要是在模板渲染成html后,通常是初始化页面完成之后,再对html dom节点进行操作
- 代码实现
export default{
name: 'App',
data (){
return {
lTime: new Date().getTime(), // 最后一次点击的时间
ctTime: new Date().getTime(), //当前时间
tOut: 10 * 60 * 1000 //超时时间10min
}
},
mounted () {
window.setInterval(this.tTime, 1000)
}
methods:{
clicked () {
this.lTime = new Date().getTime() //当界面被点击更新点击时间
}
tTime() {
this.cTime = new Date().getTime()
if (this.ctTime -this.lTime > tOut) {
if(JSON.parse(sessionStorage.getItem('Login')) === true){
// 退出登录
}
}
}
}
}
这里之所以把setInterval 写在mounted而不是methods,是因为methods是方法调用的时机不一定
更多推荐
已为社区贡献1条内容
所有评论(0)