web-dev-qa-db-ja.com

反応を使用したセッションタイムアウト警告モーダル

ユーザーが何も操作を行わない場合、13分の非アクティブ後にタイムアウト警告モーダルを表示し、15分後にセッションを終了する必要があります。私はreactjsを使用してこれを達成する必要があります。 https://www.npmjs.com/package/react-timeout#react-classic-verbose でreact-timeoutを確認しましたが、それでも解決しませんでした。これを行う方法を誰かが知っている場合は、私と共有してください。

reactjssession-timeoutreact-modal
11
abhi

このような高次コンポーネントを作成し、子コンポーネントを高次コンポーネントに渡すことができます

HOC：

`//コード

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

`

このHOCは、ルーティングファイルで、非アクティブのためにユーザーに警告を表示したいすべてのコンポーネントにラップできます。

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

上記のコードコンポーネントでは、この機能を追加するページになります。

20
Anshul Jain