Question

我正在尝试在我的react-redux应用程序中完成身份验证过程。到目前为止，我拥有以下app.js文件：

const PrivateRoute = ({ component: Component, ...rest, isAuthenticated }) => (
    <Route {...rest} render={props =>
        isAuthenticated
            ? <Component {...props} />
            : <Redirect to={{
                pathname: '/login',
                state: { from: props.location }
            }} />
    } />    
)

const App = (props) => (
    <Layout>
        <Route exact path='/' component={Home} />
        <PrivateRoute path='/block1' component={Block} isAuthenticated={props.isAuthenticated} />
        <PrivateRoute path='/block2' component={Block} isAuthenticated={props.isAuthenticated} />
        <PrivateRoute path='/block3' component={Block} isAuthenticated={props.isAuthenticated} />
        <Route path='/login' component={LogIn} />
    </Layout>
)

const mapStateToProps = state => ({
    isAuthenticated: state.logIn.isAuthenticated
});

export default connect(mapStateToProps, null, null, {
    pure: false,
})(App);

因此，当用户未通过身份验证时，他将进入登录页面，并获得身份验证并将其重定向到所需页面。如果用户拥有自己的帐户且没有时间限制，则效果很好。但是在我的应用程序中，每个用户都应该有一个帐户过期日期。如果他的过期日期小于今天，则不应允许他访问受保护的页面。

假设我在appsettings.json中具有以下用户数据：

"Users": [
    {
      "username": "demo",
      "password": "AQAAAAEAACcQAAAAEOC26OrX6idwD+trnZ38fitcAWpRAM5wnfqo3KlVpi1Tn4JWArqJ6bCLyVRbiPDsWA==",
      "expired": "2018-10-01"
    }
  ]

如果用户在2018年10月1日之前成功登录，并且未在浏览器中关闭页面，则由于 isAuthenticated < / em> 是正确的。不会是这样。

我应该如何正确处理此案？

我看到两种可能的解决方案。

如果用户正在登录，请在LogIn reducer中添加loginDate属性并为其设置值。然后在PrivateRoute组件中，将loginDate与今天的日期进行比较，如果差异大于1天，则将用户重定向到登录页面。但是我觉得这不是使其发挥最大作用的方法。

用户成功登录后，发出JWT令牌。添加Auth reducer，通过使用包含JWT令牌的标头向控制器发布请求来检查用户是否已通过身份验证。我已经做了这部分。但是，如何在PrivateRoute中调度此操作，以从Auth reducer获取 isAuthenticated 道具价值？

Answer 1

因此，您似乎需要在特定时间分派操作。或在特定时间后的。

登录时，您可以运行超时，该超时将调度一个操作（Unknown column 'custom' in 'where clause' UPDATE `users` SET `donater` = '1' WHERE `custom` = 'testing@test.com'或您使用的其他操作-最终将更新'LOGOUT'被存储）。还要额外检查令牌是否真的过期。如果令牌尚未过期（因为它已被更新），则只需初始化新的超时即可。

如何在笨拙的PrivateRoute组件中分派动作

1 个答案: