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 相关文章推荐
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
详解React路由传参方法汇总记录
Nov 29 Javascript
js调用网络摄像头的方法
Dec 05 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 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
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
PHP实现的简单日历类
2014/11/29 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
document.createElement()用法
2013/03/13 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Python利用IPython提高开发效率
2016/08/10 Python
python 内置函数filter
2017/06/01 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
Python3.6简单反射操作示例
2018/06/14 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
Flask-WTF表单的使用方法
2019/07/12 Python
python中栈的原理及实现方法示例
2019/11/27 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
python 实现任务管理清单案例
2020/04/25 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
Python 实现简单的客户端认证
2020/07/29 Python
Python打印不合法的文件名
2020/07/31 Python
Python字符串及文本模式方法详解
2020/09/10 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
商场中秋节活动方案
2014/02/07 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
工地食品安全责任书
2015/05/09 职场文书
同事欢送会致辞
2015/07/31 职场文书