react 项目实现监控鼠标移动超时未操作踢出登录页面-Toy模板网

这篇具有很好参考价值的文章主要介绍了react 项目实现监控鼠标移动超时未操作踢出登录页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

src目录下新建utils文件夹，用来存放功能组件文件，新建overtime.js，参考以下代码：

//外部定义用于清除本地缓存
import {removeToken} from './auth.js'

let timeOut = 10 * 1000;
let lastTime = new Date().getTime();
let currentTime = new Date().getTime();
//获取最外层div
let ICE_CONTAINER = document.getElementById('root');
// timeType 判断页面是否为登录页，如果是不执行踢出登录操作，初始状态为false
let timeType = false;

const OvertimeLogin=()=> {
   let testTime=()=> {//定时器
        /* 检测鼠标移动事件 */
        ICE_CONTAINER.addEventListener('mousemove', function() {
            // 更新最后的操作时间（鼠标每移动一次，就会重新计算时间）
            lastTime = new Date().getTime();
        })
        //获取当前路径   是否在登录页 还在主页即为true
			timeType = window.location.href.indexOf('login') < 0;
			//更新当前时间
			currentTime = new Date().getTime();
			console.log('currentTime', (currentTime - lastTime)/1000)
        //判断是否超时
        if (currentTime - lastTime > timeOut) {
            if (timeType) {
                console.log('超时拉')
				// 超时操作
				console.log("长时间未操作,请重新登陆");
                // 清除定时器
				window.clearInterval(global.overtime)
                //清除本地缓存
				removeToken()	
                //跳转至登录页	
				global.props.history.push('/login')
				lastTime = new Date().getTime();
		    } else {
		      lastTime = new Date().getTime();
		      console.log('我不会踢出的')
		    }
        }
    }
	return testTime
}	

export default OvertimeLogin

项目内需要此功能的页面使用

import OvertimeLogin from '../../overtime'

// 生命周期内触发函数，十秒鼠标不操作会退回登录页
componentDidMount(){		
//windows上设置一个循环定时器，每隔一秒调用一次监听函数，并定义在全局global上,用于超时后清除
    global.overtime = window.setInterval(OvertimeLogin(), 1000);
}

运行项目，登陆成功后，不移动鼠标，控制台开始计时显示

react 项目实现监控鼠标移动超时未操作踢出登录页面

10秒后自动跳转至登录页

遇到的问题：

函数内跳转获取不到props,会报错undefined,

方法一：在登录页全局定义global.props = props

函数内可使用

react 项目实现监控鼠标移动超时未操作踢出登录页面

方法二：使用Eventbus，传值

参考链接

React配合axios请求拦截校验session，403跳转至登陆页面_六卿的博客-CSDN博客_axios拦截403这个在Vue中很简单的就解决了，直接引入router，然后router.push，但是在React中，我们要使用props.history.push进行跳转，但是怎么在axios.js中拿到props呢？又是个问题。https://blog.csdn.net/qq_43291759/article/details/122575849

相应的监听BOM事件还有click,keydown，mousewheel等，更详细的用法可参考以下链接：

监听用户长时间未操作页面就自动退出登录_JcaiYang的博客-CSDN博客_网页不操作自动退出登录// 需求：当用户一定时间内没有操作页面，则自动退出登录。操作页面包括页面点击、摁下键盘、鼠标移动、鼠标滚动滚轴等。由于这些操作会频繁操作，建议使用防抖函数来减少性能的消耗。以下是js部分。// 获取浏览器页面var zBody = document.querySelector('html');// 获取服务器的超时登录时长let timeout = localStorage.getItem('timeout') || 0;// 轮询var zNum = 0; // 用户未操作页面时长...https://blog.csdn.net/Jcai_0120/article/details/115539784?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277861016782248542286%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165277861016782248542286&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-4-115539784-null-null.142%5Ev10%5Epc_search_result_control_group,157%5Ev4%5Econtrol&utm_term=%E7%BD%91%E9%A1%B5%E4%B8%8D%E6%93%8D%E4%BD%9C%E8%87%AA%E5%8A%A8%E9%80%80%E5%87%BA%E7%99%BB%E5%BD%95&spm=1018.2226.3001.4187前端react 实现监控鼠标移动超时未操作踢出登录页面_前端小小乐的博客-CSDN博客_react监听鼠标移动前言现有系统超时踢出登录实现的是页面操作调取服务时获取，这样就有一个弊端，列如：在未调取服务时，系统填写完相关信息点击提交才知道登录超时踢出登录，用户实用性不佳。现在想到一个方法就是前端获取用户鼠标是否移动，未移动一定时间后，前端实现踢出登录操作。1.给页面最外层的div增加监听事件let ICE_CONTAINER = document.getElementById('app');//鼠标最后的操作时间let lastTime = new Date().getTime();//当前时间lehttps://blog.csdn.net/gxl5201314lele/article/details/114965936?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277595516782248533170%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=165277595516782248533170&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-114965936-null-null.142%5Ev10%5Epc_search_result_control_group,157%5Ev4%5Econtrol&utm_term=react%E5%AE%9E%E7%8E%B0%E7%9B%91%E6%8E%A7%E9%BC%A0%E6%A0%87&spm=1018.2226.3001.4187文章来源地址https://www.toymoban.com/news/detail-488258.html

到了这里，关于react 项目实现监控鼠标移动超时未操作踢出登录页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！