Javascript 如何使React中的路由对所有用户都不可访问，除非发生某些事件

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

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 }
                        }}
                    />
                )
            }
        />
    );
};

constprivate=（{component:component，…rest}）=>{
const authenticated=reduxStore.getState（）.auth.isAuthenticated；
const token=reduxStore.getState（）.auth.token；
返回(
认证的| |令牌(
) : (
)
}
/>
);
};

这在阻止没有帐户的用户方面做得很好，但是我如何实现

myroute

，这样就不能通过访问

https://example.com/api/myroute

一旦您拥有用户凭据？使用案例是，当用户想要更改密码时，他们单击一个链接，通过电子邮件向他们发送代码。当他们输入该代码时，他们将被定向到具有更改密码表单的新页面（组件）

---

我希望此表单完全不可访问，除非输入代码并自动重定向，这样人们就不能绕过代码验证步骤。就像我说的，私有路由是教程中常见的一部分，但我很难找到关于完全安全路由的任何信息。

因为react使用客户端路由，所以您可以让应用程序组件为您处理所有路由

---

因此，如果有人直接访问需要授权的链接，它必须通过你的应用程序组件，该组件完成所有客户端路由。如果您首先通过要求身份验证（即检查jwt令牌或查看cookie会话）来保护路由，那么即使有人直接访问url，您的路由也会得到保护。

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

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