当用户在ReactJS中处于非活动状态时，如何自动注销？

Question

我需要知道REACT JS或HTML5中是否有任何API可提供在用户不活动时自动注销的功能。不必要的绑定。请告诉我我要去哪里了

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';



class Toogle extends React.Component {
constructor(props) {
    super(props);
    //step 1
    this.handleClick = this.handleClick.bind(this);
   this.startTimer=this.startTimer.bind(this)
}



         handleClick() {
    console.log('Button is clicked');

//  clearTimeout(timeoutTimer);
          startTimer() {

        var timeoutTimer = setTimeout(function() {
            window.location.href = '#/security/logout';
        }.bind(this), 1000);



        }

}
render() {
    return (<div onMouseMove={this.handleClick}>Move the cursor over me</div>);
}

   }


    ReactDOM.render(
   <Toogle />,
   document.getElementById('root')
    );

Answer 1

如果您使用该react-router库来添加前端路由配置，您可以在用户导航到另一个页面时触发一个函数。

<Route path="/" onEnter={onUserNavigate} onChange={onUserNavigate}>
    ...
</Route>

然后你可以让你的事件处理函数计算用户导航之间的时间。

注意这只是一个框架代码（作为您实际方法的原型）

function onUserNavigate() {
    let idleTime = getCurrentTime() - getPreviousNavTime();
    storeCurrentNavTime();
    if (idleTime > ALLOWED_IDLE_TIME)
        window.location.href = '#/security/logout';
}

所以，上面的函数假设，

• 你有一个方法来获取当前时间（getCurrentTime函数）
• 当用户导航到页面时，您有一种方法可以存储和获取时间戳
• 你有一个常数叫做 ALLOWED_IDLE_TIME来存储用户在两个页面之间花费的最小允许空闲时间。
• 您有一个注销 URL（#/security/logout在上面的示例代码中取值）
• 不希望用户在不浏览 react-router 路径的情况下与页面交互。例如，用户可能会在超出允许的空闲时间后使用浏览器控制台与页面交互。

对于时间戳相关的计算和方法，您可以使用任何 JavaScript 库，例如 momentjs

希望有所帮助。

更新零件周围有不必要的绑定}.bind(this), 1000);只需删除该.bind(this)段即可。

另外，startTimer() {片段应该给你语法错误。为此，您应该删除该startTimer() {行及其相应的结束}行

Answer 2

接受的答案可能对您有所帮助，但是导航路线之间的时间并不是真正的“非活动”时间。

react-idle可以做到这一点，阅读文档，您可以按应有的方式进行操作。