如何在哑 PrivateRoute 组件中调度操作

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 日之前成功登录并且他没有在浏览器中关闭该页面，那么他可以在 2018 年 10 月 1 日之后访问受保护的页面，因为 isAuthenticated 是真的。不应该是这样的。

我应该如何正确处理这种情况？

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

1. 如果用户正在登录，则在 LogIn reducer 中添加 loginDate 属性并为其设置值。然后在 PrivateRoute 组件中将 loginDate 与今天的日期进行比较，如果差异大于 1 天，则将用户重定向到登录页面。但我觉得这不是让它发挥作用的最佳方式。
2. 在用户成功登录后发出一个 JWT 令牌。添加 Auth reducer 来检查用户是否通过向控制器发送请求并使用包含 JWT 令牌的标头来进行身份验证。我已经做了这部分。但是如何在 PrivateRoute 中调度此操作以从 Auth reducer 获取 isAuthenticated 属性值？

Answer 1

因此，您似乎需要在某个特定时间调度操作。或在某个特定时间之后。

当您登录时，您可以运行超时，这将调度一个操作（'LOGOUT' 或您使用的其他内容 - 最终将更新 isAuthenticated 是存储）。额外检查令牌是否真的已过期。如果令牌尚未过期（因为它已更新），只需初始化新的超时即可。