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 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
javascript中layim之查找好友查找群组
Feb 06 Javascript
在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构造函数实例讲解
2013/11/13 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
JavaScript 学习技巧
2010/02/17 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
python中的装饰器详解
2015/04/13 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
比利时香水网上商店:NOTINO
2018/03/28 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
十佳家长事迹材料
2014/08/26 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python