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

Question

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

Answer 1

あなたはこのように、より高次のコンポーネントを作成することができますし、より高次のコンポーネントを介して子コンポーネントを渡すことができ

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)} />

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