使用反應會話超時警告模式

Question

我有一個要求，如果用戶不採取任何行動，則在13分鐘的非活動狀態和結束會話之後15分鐘後顯示超時警告模式。我需要使用reactjs來實現這一點。我檢查了https://www.npmjs.com/package/react-timeout#react-classic-verbose的react-timeout，但這並沒有幫助。 如果有人知道如何做到這一點，請與我分享。

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

在上面的代碼組成部分將是頁。