当用户在 ReactJS 中处于非活动状态时如何自动注销? [英] How to auto log off when a user is inactive in ReactJS?

问题描述

我需要知道 REACT JS 或 HTML5 中是否有任何 API 可以在用户处于非活动状态时提供自动注销功能.我的代码在下面我不知道有什么问题它给了我错误 startTimer is not defined 和不必要的绑定.请告诉我哪里出错了

从'react'导入React；从 'react-dom' 导入 ReactDOM；导入'./App.css';class Toogle 扩展了 React.Component {构造函数(道具){超级(道具)；//步骤1this.handleClick = this.handleClick.bind(this);this.startTimer=this.startTimer.bind(this)}句柄点击(){console.log('按钮被点击');//clearTimeout(timeoutTimer);开始定时器(){var timeoutTimer = setTimeout(function() {window.location.href = '#/security/logout';}.bind(this), 1000);}}使成为() {返回 (<div onMouseMove={this.handleClick}>将光标移到我身上

);}}ReactDOM.render(<工具/>,document.getElementById('root'));

解决方案

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

...</路线>

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

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

function onUserNavigate() {让 idleTime = getCurrentTime() - getPreviousNavTime();storeCurrentNavTime();如果(空闲时间> ALLOWED_IDLE_TIME)window.location.href = '#/security/logout';}

所以，上面的函数假设，

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

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

希望有所帮助.

UPDATE }.bind(this), 1000); 删除.bind(this)> 段.

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

I need to know if there is any API in REACT JS or HTML5 which provides the functionality of auto-log off when a user is inactive. My code is below I don't know what is wrong it is giving me the error startTimer is not defined and unnecessary binding. Please tell me where I am going wrong

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

解决方案

If you are using the react-router library to add front-end route configuration, you can fire a function whenever a user navigates to another page.

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

Then you can have your event handler function calculate the time between to user navigations.

N.B. This is only a skeleton code (serves as a prototype for your actual method)

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

So, the above function assumes that,

• You have a method to get the current time (getCurrentTime function)
• You have a method to store and get timestamps when a user navigates to a page
• You have a constant called ALLOWED_IDLE_TIME to store the minimum allowed idle time the user spends between two pages.
• You have a logout URL (valued #/security/logout in the example code above)
• The user isn't expected to interact with the page without navigating through the react-router paths. For example, the user may interact with the page using a browser console beyond the allowed idle time.

For timestamp related calculations and methods you can use any JavaScript library like momentjs

Hope that helped.

UPDATE There is an unnecessary binding around the part }.bind(this), 1000); Just remove the .bind(this) segment.

Plus, the startTimer() { fragment should give you syntax error. For that you should remove the startTimer() { line and its corresponding closing } line

这篇关于当用户在 ReactJS 中处于非活动状态时如何自动注销?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！