在React應用程序中處理JWT身份驗證

我試圖通過react-router v4實現受限制的路由，而且我幾乎完成了任務，但是我需要處理JWT令牌的驗證，並且不知道將該位置放在哪裏。在React應用程序中處理JWT身份驗證

RestrictedRoute

const RestrictedRoute = (props) => { 
    const { component, ...otherProps } = props; 
    return <Route {...otherProps} component={component} />; 
}; 

const mapStateToProps = state => ({ 
    authenticated: state.authentication.session, 
}); 


const branched = branch(
    ({ authenticated }) => !authenticated, 
    renderComponent(() => <Redirect to="/login" />), 
); 

const enhanced = compose(
    connect(mapStateToProps), 
    branched, 
)(RestrictedRoute); 

export default enhanced;

所以用這個我能如果state.authentication.session設置爲false將用戶重定向到/login頁。到目前爲止，我正在檢查是否存在jwt Cookie，並基於此設置此session。這有一些簡單的漏洞，因爲您可以添加具有任何值的jwt Cookie，並且您將被視爲已通過身份驗證。

我創建了一個端點用於驗證我的jwt令牌併爲此創建了一個操作。我的問題是 - 在哪裏把這個？

如果我把這個在RestrictedRoutecomponentWillMount和驗證的用戶試圖訪問受限制的網頁時，他表現出login頁，然後切換到受限制的路徑，從終端的響應改變了Redux店。

來源

2017-08-28 Ancinek

是否要在每個RestrictedRoute中驗證您的令牌？爲什麼？！

即使您的反應路由受到限制，您也不需要驗證令牌是否更改路由。

您必須通過編寫該API的策略或中間件來驗證您的令牌以獲取服務器上的數據。

用這種方法你可以檢查驗證它在反應路線餅乾..如果黑客把你的cookie中的數據，他們可以訪問到該反應路線，但他們不能看到數據

來源

2017-09-06 05:52:20

謝謝爲答案。我通過驗證服務器上的令牌（正如服務器端渲染）並將數據傳遞給我的redux商店來處理它。 – Ancinek

歡迎@Ancinek –

在React應用程序中處理JWT身份驗證

回答

相關問題