除非发生某些事件，否则如何使所有用户都无法访问 React 中的路由

Question

我在我正在构建的应用程序中实现了一个私有组件，如果用户还没有帐户，它将把用户重定向到登录页面。这是一个相当常见的实现，可以在很多教程中找到。这是私人路线：

const Private = ({ component: Component, ...rest }) => {
    const authenticated = reduxStore.getState().auth.isAuthenticated;
    const token = reduxStore.getState().auth.token;
    return (
        <Route
            {...rest}
            render={props =>
                authenticated || token ? (
                    <Component {...props} />
                ) : (
                    <Redirect
                        to={{
                            pathname: "/login",
                            state: { from: props.location }
                        }}
                    />
                )
            }
        />
    );
};

这很好地将没有帐户的用户拒之门外，但是我将如何实施 myroute 以便一旦您拥有用户凭据就无法通过简单地访问 https://example.com/api/myroute 来访问它？用例是当用户想要更改密码时，他们单击 link，然后通过电子邮件向他们发送代码。当他们输入该代码时，他们将被定向到具有更改密码表单的新页面（组件）。

我希望此表单完全无法访问，除非输入代码并自动重定向，这样人们就无法绕过代码验证步骤。就像我说的，私人路线是教程的常见部分，但我正在努力寻找任何关于完全安全路线的信息。

Answer 1

由于 React 使用客户端路由，您可以让应用组件为您处理所有路由。

因此，如果有人直接进入需要授权的 link，它必须通过您的应用程序组件，该组件会执行所有客户端路由。如果您通过首先要求身份验证（IE 检查 jwt 令牌或查看 cookie 会话）来保护路由，那么您的路由将是安全的，即使有人直接访问 url。

Answer 2

通常带有重置密码的电子邮件 link 包含令牌，该令牌是在服务器上的密码更改请求期间创建的。令牌通过查询参数在link中传输。

如果密码更改页面在查询中没有令牌（来自电子邮件 link），则 link 无效并且用户不小心点击了该页面。您将用户重定向到登录/主页。
如果有令牌，那么我们允许用户使用表单，然后向服务器发送新的密码和令牌。

除非发生某些事件，否则如何使所有用户都无法访问 React 中的路由

How to make a route in React inaccessible to all users except when certain events happen

javascript

routes

web-component

reactjs