vue实现用户长时间不操作自动退出登录功能的实现代码


Posted in Javascript onJuly 23, 2020

一、需求说明

昨天后端开发人员让我实现一个网页锁屏,当时我一头雾水,问他为啥搞的跟安卓系统一样。他的回复是"看起来帅点"。

首先我们梳理下逻辑,先来个简化版的,用户长时间未操作时,返回登录页

二、思路

使用 mouseover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出登陆,清除token,返回登录页

三、实现

【1】在util文件夹下创建一个storage.js封装localStorage方法

export default {
 setItem(key, value) {
 value = JSON.stringify(value);
 window.localStorage.setItem(key, value)
 },
 getItem(key, defaultValue) {
 let value = window.localStorage.getItem(key)
 try {
  value = JSON.parse(value);
 } catch {}
 return value || defaultValue
 },
 removeItem(key) {
 window.localStorage.removeItem(key)
 },
 clear() {
 window.localStorage.clear()
 },
}

 

【2】在util文件夹下创建一个astrict.js

每隔30s去检查一下用户是否过了30分钟未操作页面

// 引入路由和storage工具函数
import storage from '@/utils/storage'
import router from "@/common/router"

let lastTime = new Date().getTime()
let currentTime = new Date().getTime()
let timeOut = 30 * 60 * 1000 //设置超时时间: 30分钟

window.onload = function () {
 window.document.onmousedown = function () {
 stroage.setItem("lastTime", new Date().getTime())
 }
};

function checkTimeout() {
 currentTime = new Date().getTime()		//更新当前时间
 lastTime = stroage.getItem("lastTime");

 if (currentTime - lastTime > timeOut) { //判断是否超时

 // 清除storage的数据(登陆信息和token)
 storage.clear()
 // 跳到登陆页
 if(router.currentRouter.name == 'login') return // 当前已经是登陆页时不做跳转
 router.push({ name: 'login' })
 }
}

export default function () {
 /* 定时器 间隔30秒检测是否长时间未操作页面 */
 window.setInterval(checkTimeout, 30000);
}

 

【2】在main.js引入astrict.js

import Astrict from '@/utils/astrict'
Vue.use(Astrict)

四、锁屏

实现网页锁屏的思路和上面自动退出登录类似,稍微改动实现如下:

【1】用户长时间未操作,弹出设置锁屏密码弹框设置锁屏密码

【2】密码(password)和锁屏状态(isLock)存入localStorage 和vuex

【3】设置成功后跳转到锁屏登录页

【4】 在路由里面判断vuex里面的isLock(为true锁屏状态不能让用户后退url和自行修改url跳转页面否则可以)

【5】用户在锁屏登录页输入刚刚设置的锁屏密码,即可解开锁屏

总结

到此这篇关于vue实现用户长时间不操作自动退出登录功能的实现代码的文章就介绍到这了,更多相关vue 长时间不操作自动退出登录内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 #Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 #Javascript
javascript递归函数定义和用法示例分析
Jul 22 #Javascript
简单了解vue 插值表达式Mustache
Jul 22 #Javascript
详解node.js 事件循环
Jul 22 #Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 #jQuery
详解vue中v-on事件监听指令的基本用法
Jul 22 #Javascript
You might like
PHP date函数参数详解
2006/11/27 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
jquery $("#variable") 循环改变variable的值示例
2014/02/23 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
大专生的学习自我评价
2013/12/04 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
数控专业自荐书范文
2014/03/16 职场文书
《悯农》教学反思
2014/04/28 职场文书
高中综合实践活动总结
2014/07/07 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python