Question

因此，我目前正在网站上实现“重置密码”功能。我的应用程序使用JWT进行身份验证。该应用程序在前端使用React（React Hook，而不是组件），路由使用react-router-dom，在后端使用Flask。

后端功能正常运行。用户填写他们想重设密码的电子邮件的电子邮件地址，然后后端发送一封电子邮件，并提供指向该地址的链接，此链接可以单击（现在，一旦单击，它只会返回一个OK响应，并且没什么）。

我的问题是，在他们的收件箱中单击链接之后，我希望将用户转发到/change_password页，在此他们可以填写新密码。

点击电子邮件链接后，我如何才能从Flask后端转到在React中渲染特定路线？

我在整个应用程序中都使用react-router-dom客户端路由。

我只是问，因为将应用程序的服务器端渲染和客户端渲染混合在一起似乎有些奇怪。如果我可以转发到React中的页面，那就太好了。

所以我的路线被index.jsx调用

index.jsx

ReactDOM.render(<AppRouter/>, document.getElementById("app"));

routes.jsx

const AppRouter = () => {
  const [user, setUser] = useState(null);
  const providerValue = useMemo(() => ({user, setUser}), [user, setUser]);

  return(
    <BrowserRouter>
      <Route exact path='/' component={LandingPage} />
      <Switch>
        <UserContext.Provider value={providerValue}>
          <Route path="/login" component={LoginPage} />
          <Route path="/register" component={RegisterPage} />
          <Route path="/forgotten" component={ForgottenPage} />
          <PrivateRoute path="/home" component={UserApp} />
        </UserContext.Provider>
      </Switch>
      <Redirect from="*" to="/" />
    </BrowserRouter>
  )
}

此刻，Flask仅渲染index.html，它具有1个标记元素ID为app。

任何建议都会很棒。

Answer 1

抱歉，不能100％了解您当前的设置是什么

服务器端渲染 是的，确切地说，将其发送，然后在单击按钮时将令牌和用户ID发送到后端，并且在验证之后，后端会发回一个模板，然后将其填写并再次将令牌和用户ID发送到api （至少我会怎么做）

客户端渲染

我要解决的方法是在我的路由器中 <路由路径“ / recoverpassword /：tempToken”> {recoverComponent} 然后使该链接将您带到app.com/recoverpassword/{tempToken} 然后在recoverComponent上设置一个componentDidMount，它调用后端以确保链接处于活动状态并且令牌有效。如果是，则使用令牌来设置新密码。

您可以尝试使用某种侦听器，但是如果它们仅以示例的方式将浏览器切换到电子邮件收件箱，则此操作将无效。完全不建议

从电子邮件链接重定向到页面

1 个答案: