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

布克吉

已于 2024-02-04 16:51:05 修改

阅读量1.7k

点赞数 1

分类专栏： React专栏文章标签： react.js javascript 前端

于 2022-05-20 10:45:26 首次发布

本文链接：https://blog.csdn.net/weixin_57798646/article/details/124826368

版权

React专栏专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

现在有这么一个需求，我们在登陆网页后，有一些私密的内容，不希望被路过的人或离开一段时间后如果没有操作，就回退到登录页。

1.简单案例（用于初步测试）

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);
}

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

10秒后自动跳转至登录页

2.遇到的问题

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

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

函数内可使用

方法二：使用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

3.完整案例

步骤：

1.react类组件中，登陆后的主页面，在定义组件之前创建一个变量，用于获取dom元素；

2.在生命周期componentDidMount中监听鼠标键盘行为，并创建定时器；

注意：此处如果使用window进行全局监听则会出问题，最后操作时间无法清除

3.在生命周期componentWillUnmount中移除定时器，并销毁监听事件。

class Home extends Component {   
    componentDidMount() {
		this.ChangeUserOperation()
		this.CheckOpartionTimer = setInterval(
		    () => {
		        let _lastTime = LocalStorage.getItems('lastTime') * 1;
		        let nowTime = new Date().getTime();
				// console.log('nowTime',nowTime);
		        if(nowTime - _lastTime > 1000 * 10) {
		            console.log('当前时间：',nowTime,'最新时间',_lastTime, '间隔：', (nowTime-_lastTime), '超时了，已退出登录');
		            message.warning('长时间未操作，已退出登录', 9);
		            // 清除计时器
		            clearInterval(this.CheckOpartionTimer)
		            // 断开连接，退出
		            this.Loginout();
		        }
		    },
		    1000
		)
	}

	componentWillUnmount() {
	    clearInterval(this.CheckOpartionTimer);
		LocalStorage.removeAllItems()
		homeWrapper.removeEventListener('click', function(){});
		homeWrapper.removeEventListener('keydown', function(){});
		homeWrapper.removeEventListener('mouseover', function(){});
		homeWrapper.removeEventListener("mousewheel", function(){});
	}

    ChangeUserOperation  = () => {
	    let callEvent = () => {
	        LocalStorage.SetItems('lastTime', new Date().getTime().toString())
	    }
		homeWrapper = document.getElementById('homeWrapper')
	    homeWrapper.addEventListener('click', callEvent);
	    homeWrapper.addEventListener('keydown', callEvent);
	    homeWrapper.addEventListener('mouseover', callEvent);
	    homeWrapper.addEventListener("mousewheel", callEvent);
	}

    return (
			<div id="homeWrapper"></div>
            )
}
export default Home