如何在用戶在ReactJS中處於非活動狀態時自動註銷？

我需要知道是否有REACT JS或HTML5中的任何API，當用戶處於非活動狀態時，它提供了auto-log關閉的功能。我的代碼在下面我不知道什麼是錯誤它給我的錯誤startTimer不是定義和不必要的binding.Please告訴我，我錯了如何在用戶在ReactJS中處於非活動狀態時自動註銷？

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './App.css'; 



class Toogle extends React.Component { 
constructor(props) { 
    super(props); 
    //step 1 
    this.handleClick = this.handleClick.bind(this); 
    this.startTimer=this.startTimer.bind(this) 
} 



     handleClick() { 
    console.log('Button is clicked'); 

// clearTimeout(timeoutTimer); 
      startTimer() { 

     var timeoutTimer = setTimeout(function() { 
      window.location.href = '#/security/logout'; 
     }.bind(this), 1000); 



     } 

} 
render() { 
    return (<div onMouseMove={this.handleClick}>Move the cursor over me</div>); 
} 

    } 


    ReactDOM.render(
    <Toogle />, 
    document.getElementById('root') 
    );

來源

2016-11-30 Gitesh

非常廣泛的問題..不是真的太值得。您必須自己編寫這些功能或查找認證軟件包。 –

如果您使用的是react-router庫添加前端路由的配置，只要用戶導航到另一個頁面，您可以觸發一個功能。

<Route path="/" onEnter={onUserNavigate} onChange={onUserNavigate}> 
    ... 
</Route>

然後，您可以讓您的事件處理函數計算用戶導航之間的時間。

N.B.這僅僅是一個框架代碼（作爲原型爲您的實際方法）

function onUserNavigate() { 
    let idleTime = getCurrentTime() - getPreviousNavTime(); 
    storeCurrentNavTime(); 
    if (idleTime > ALLOWED_IDLE_TIME) 
     window.location.href = '#/security/logout'; 
}

因此，上述功能假定，

你有一個方法來獲得當前時間（getCurrentTime功能）
你必須存儲和獲取時間戳當用戶導航到一個頁面
你有一個恆定叫ALLOWED_IDLE_TIME存儲允許的空閒時間的用戶兩頁之間花費最小的方法。
您有一個註銷URL（在上面的示例代碼中，值爲#/security/logout）
用戶不需要在瀏覽反應路由器路徑時與頁面交互。例如，用戶可以使用超出允許的空閒時間的瀏覽器控制檯與頁面進行交互。

對於timestamp相關的計算和方法，你可以使用任何JavaScript庫，例如momentjs

希望這有助於。

UPDATE零件周圍存在不必要的綁定}.bind(this), 1000);只需刪除.bind(this)段。

另外，startTimer() {片段應該會給你語法錯誤。爲此，你應該刪除startTimer() {線和其相應的關閉}線

來源

2016-11-30 13:43:03 Leone

感謝您的幫助。我寫了代碼並編輯了我的問題。請查看我在哪裏錯了 – Gitesh

@Gitesh代碼中可能存在一些語法錯誤。圍繞'} .bind（this），1000）;'我不認爲你需要'.bind（this）'部分。 – Leone

@Gitesh我已經更新了我上面的答案。 – Leone

如何在用戶在ReactJS中處於非活動狀態時自動註銷？

回答

相關問題