如果登录成功，如何将用户从登录页面重定向到另一个反应页面？

Posted 2023-02-22

【中文标题】如果登录成功，如何将用户从登录页面重定向到另一个反应页面？

【英文标题】：How to redirect user from login page to another react page if the login was successful?

【发布时间】：2021-05-04 23:22:48

【问题描述】：

嘿，我正在开发我的第一个全栈应用程序，前端使用 React + Node，后端使用 Express。 我有一个 /login 路由（使用：react router dom）。我希望用户使用电子邮件和密码登录，然后向我的服务器发出获取请求 (POST)，以将这些数据与存储在我的数据库中的数据进行比较。我设法做到了所有这些，但如果用户帐户已在数据库中注册，我想知道如何将用户从 /login 重定向到 /DASHBOARD 页面（组件）。如何进行重定向？ 我看到了教程，但他正在使用 ejs 并在服务器上进行了重定向。如何做到这一点，而不是重定向到 ejs 页面，而是将用户重定向到另一个反应组件/页面??? 我的项目结构：客户端文件夹（里面有react app）和服务器文件夹（节点在这里）。 为了更短：如何将用户从 /login（react router dom route）路由重定向到另一个 react 路由？

【问题讨论】：

您也可以在路由器级别处理重定向。这里是一个总体思路：***.com/a/65979202/2873538 这里还有一个例子：reactrouter.com/web/example/auth-workflow of authentication。

在useEffect 使用history.push('/you_new_route')，一旦用户成功登录。history 定义为const history = useHistory() 来自react-router-dom。

【参考方案1】：

我通常像这样通过 React Router DOM 使用重定向

导入重定向

import  Redirect  from 'react-router-dom';

在构造函数中将重定向状态声明为 null

constructor(props)
    super(props);
    this.state =  redirect: null ;

在你的 render() 方法中包含一个重定向检查

if (this.state.redirect) 
    return <Redirect to=this.state.redirect/>

然后您执行 POST 请求以登录用户，成功验证后 - 将 state.redirect 设置为您希望重定向到的组件的路径。

this.setState(redirect:"/dashboard");

【参考方案2】：

最常见的方式是在登录成功的情况下使用https://github.com/ReactTraining/history/blob/master/docs/api-reference.md#history.push。在执行此操作之前，请确保在客户端保留所有必要的内容，以便应用不会将用户返回到登录页面。

【讨论】：

如果我在客户端（反应），如何知道我的数据库中是否存在用户电子邮件和密码？

@OmarAbouassy 加载应用程序时，您发送一个请求，确定用户是否已通过身份验证。这就像被允许回到夜总会，因为你的前臂上有一个印章。保镖知道您之前已经登录并让您通过。

【参考方案3】：

对于类组件：

从 'react-router-dom' 导入 withRouter ;

...

在执行操作的函数之后：

this.props.history.push("/")

...

用Router（示例）导出默认值；

函数组件：https://***.com/a/60516422/14445061

【讨论】：

所以，要进行重定向，我需要使用历史对象。但是如果我在客户端（反应），如何知道我的数据库中是否存在用户电子邮件和密码？我的意思是如何知道登录是否成功/失败？

withRouter 不需要，只针对需要感知路由变化的组件。在“成功登录”的情况下，我们不关心这一点。直接导入push就够了。