antd+React 简易自动登出组件

用antd的Statistic组件写的一个简易自动登出组件

不废话直接上代码

import {Statistic } from 'antd';
import React,{useState} from 'react';

//这里设置一小时
const timeRange = 1*60*60*1000

function AutoLogout() {
    const [deadline, setDeadline] = useState(Date.now() + timeRange)
    
    let onFinish= () => {
       ...
       //登出操作
       ...
    };

//减少灵敏度，因为移动鼠标可能会出发十几次
    let changetime = _.debounce(() => {
        setDeadline(Date.now() + timeRange)
    },500, { 'maxWait': 2000 })

//感知移动鼠标
    document.onmousemove=(event)=>{
        changetime();
    }

//感知按下键盘
    document.onkeypress=(event)=>{
        changetime();
    }

    return (
        <Statistic.Countdown 
            value={deadline}
            onFinish={onFinish}
            //需要隐藏则可以使用
            // style={{visibility:'collapse'}}
        />
    )
}

export default AutoLogout;

整体还算简单，并且试下来效果不错

如果有帮助你的话，能点个赞吗？