成功登录操作后重定向

Question

我在尝试成功登录后将用户重定向到主页时遇到问题。我在github中使用这个例子。

https://github.com/cornflourblue/react-redux-registration-login-example

在这个文件中，“src / LoginPage / LoginPage.jsx”，有一个部分在POST消息中发送登录请求，但我没有看到任何重定向到主页，只是登录页面。这是部分：

handleSubmit(e) {
    e.preventDefault();

    this.setState({ submitted: true });
    const { username, password } = this.state;
    const { dispatch } = this.props;
    if (username && password) {
        dispatch(userActions.login(username, password));
    }
} 

当我查看网络活动时，我看到我从服务器的响应中收到了成功的消息。我是否需要添加重定向功能？

Answer 1

是的，您需要将Browser Routing添加到您的项目中，并且在成功登录后，您应该重定向到您想要的页面。例如to="/Home"。首先，你需要在你的redux减速机中使用像isAuth这样的东西。登录提交后，如果成功将此设置为true，并在LoginPage中使用mapStateToProps获取此isAuth值。同样在你的render()部分，在你的其他jsx代码之前使用它 - >

render() {
 let redirect = null;
 if(isAuth == true){
   redirect = <Redirect to="/Home" />;
 }

 return (
    {redirect}
  )
}

Answer 2

我找到了问题的原因。如果响应成功，则必须将某些内容设置为localStorage。在私有路由中，它检查localStorage中是否存在该东西。如果没有，它不会做任何事情，但如果有，它会操作要重定向的组件。我忘记编辑这部分了。这就是原因，它没有重定向。