Sitzung Timeout Warnung modal mit reagieren

Question

Ich habe eine Anforderung, Timeout-Warnung modal nach 13 Minuten Inaktivität anzuzeigen und Sitzung nach 15 Minuten beenden, wenn der Benutzer nichts unternimmt. Ich muss dies mit reactjs erreichen. Ich habe react-timeout um https://www.npmjs.com/package/react-timeout#react-classic-verbose überprüft, aber das hat nicht geholfen. Wenn jemand einen Weg kennt, dies zu tun, bitte teilen Sie mit mir.

Answer 1

Sie können eine höhere Auftragskomponente wie diese erstellen und untergeordnete Komponente durch höhere Auftragskomponente

HOC passieren kann:

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

`

können Sie Umschließen Sie dieses HOC für alle Komponenten, in denen Benutzer aufgrund von Inaktivität gewarnt werden sollen, in der Routing-Datei

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

in der obigen Codekomponente wird die Seite sein, auf der Sie diese Funktionalität hinzufügen möchten.