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

Question

所以我目前正在我的网站上实施“重置密码”功能。我的应用程序使用 JWT 进行身份验证。该应用程序在前端使用 React（React Hooks，而不是组件），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 （至少我会怎么做）

客户端渲染

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

您可以尝试使用某种类型的侦听器，但如果他们切换浏览器以转到他们的电子邮件收件箱（仅作为示例），那么这将不起作用。完全不建议这样做