使用反应的会话超时警告模式 [英] Session timeout warning modal using react

问题描述

如果用户不采取任何行动，我需要在 13 分钟不活动后显示超时警告模式，并在 15 分钟后结束会话.我需要使用 reactjs 来实现这一点.我在 https://www.npmjs.com/package 检查了反应超时/react-timeout#react-classic-verbose，但这没有帮助.如果有人知道如何做到这一点，请与我分享.

解决方案

你可以像这样创建一个高阶组件，并且可以通过高阶组件传递子组件

HOC:

`//代码

导出默认函数(ComposedClass) {类 AutoLogout 扩展了 React.Component {构造函数(道具){超级(道具)；this.state = {警告时间:1000 * 60 * 10，退出时间:1000 * 60 * 15，};}componentDidMount() {this.events = ['加载'，'鼠标移动','鼠标按下'，'点击'，'滚动'，'按键'];for (var i in this.events) {window.addEventListener(this.events[i], this.resetTimeout);}this.setTimeout();}clearTimeoutFunc = () =>{if (this.warnTimeout) clearTimeout(this.warnTimeout);if (this.logoutTimeout) clearTimeout(this.logoutTimeout);};setTimeout = () =>{this.warnTimeout = setTimeout(this.warn, this.state.warningTime);this.logoutTimeout = setTimeout(this.logout, this.state.signoutTime);};resetTimeout = () =>{this.clearTimeoutFunc();this.setTimeout();};警告 = () =>{window.alert("您将在 1 分钟后自动退出")console.log('您将在 1 分钟后自动退出.');};注销 = () =>{//向 API 发送注销请求console.log('向 API 发送注销请求...');this.destroy();};销毁 = () =>{//清除会话browserHistory.push('/');window.location.assign('/');};使成为() {返回 (<div><ComposedClass {...this.props}/>

);}}}

`

您可以将此 HOC 包装到所有由于不活动而要向用户发出警告的组件，在路由文件中

在上面的代码组件中将是您要添加此功能的页面.

I have a requirement to display timeout warning modal after 13 mins of inactivity and end session after 15 mins if user takes no action. I need to achieve this using reactjs. I checked react-timeout at https://www.npmjs.com/package/react-timeout#react-classic-verbose, but that didn't help. If anyone knows of a way to do this, please share with me.

解决方案

You can create a higher order component like this and can pass child component through higher order component

HOC:

`// code

export default function(ComposedClass) {
  class AutoLogout extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        warningTime: 1000 * 60 * 10,
        signoutTime: 1000 * 60 * 15,
      };
    }

    componentDidMount() {
      this.events = [
        'load',
        'mousemove',
        'mousedown',
        'click',
        'scroll',
        'keypress'
      ];

      for (var i in this.events) {
        window.addEventListener(this.events[i], this.resetTimeout);
      }

      this.setTimeout();
    }

    clearTimeoutFunc = () => {
      if (this.warnTimeout) clearTimeout(this.warnTimeout);

      if (this.logoutTimeout) clearTimeout(this.logoutTimeout);
    };

    setTimeout = () => {
      this.warnTimeout = setTimeout(this.warn, this.state.warningTime);
      this.logoutTimeout = setTimeout(this.logout, this.state.signoutTime);
    };

    resetTimeout = () => {
      this.clearTimeoutFunc();
      this.setTimeout();
    };

    warn = () => {
      window.alert("You will be logged out automatically in 1 minute")
      console.log('You will be logged out automatically in 1 minute.');
    };

    logout = () => {
      // Send a logout request to the API
      console.log('Sending a logout request to the API...');
      this.destroy();
    };

    destroy = () => {
     //clear the session
      browserHistory.push('/');
      window.location.assign('/');
    };

    render() {

      return (
        <div>
          <ComposedClass {...this.props} />
        </div>
      );
    }
  }
}

`

You can wrap this HOC to all those component in which you want to give user warning due to inactivity, in routing file

<Route path="/test" component={HOC(comonent)} />

in above code component will be the page where you want to add this functionality.

这篇关于使用反应的会话超时警告模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！