在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身份验证

回答

相关问题