Question

我对React和Redux还是比较陌生，我正在尝试管理登录系统和经过身份验证的路由。我目前有一个登录表单，该表单在提交时调用名为login的操作，该操作将redux状态更改为将isAuthenticated设置为true并将user设置为任何用户。

我想将用户从任何登录位置重定向到上一页，但是当我登录时，它会重定向回到首页，然后才有机会将登录表单的状态更改为重定向回引用，该组件将被卸载。

登录表单和登录redux操作的代码如下所示。预先感谢您的帮助。

class LoginForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
        email: '',
        password: '',
        errors: {},
        redirectToReferrer: false
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.login = login.bind(this);
  }

  onChange(e){
    this.setState({[e.target.name]: e.target.value});
  }

  onSubmit(e) {
    e.preventDefault();

    const post = {
      email: this.state.email,
      password: this.state.password
    }

    this.props.login(post).then(
      (res) => this.setState(() =>{redirectToReferrer: true}),
      (err) => console.log(err)
    )
  }



  render(){
    const { redirectToReferrer } = this.state.redirectToReferrer;
    const { from } = {from: {pathname: '/client/games'}};

    if(redirectToReferrer === true){
      return(
        <Redirect to={from}  />
      )
    }

    return(
      <div>
        <form onSubmit={this.onSubmit}>
          <input type="text" id="email" onChange={this.onChange} name="email" placeholder="Email"/>
          <input type="password" id="password" onChange={this.onChange} name="password" placeholder="Password"/>
          <br />
          <button type="submit" className="submit">Login</button>
        </form>
        <br />
      </div>
    );
  }
}

LoginForm.contextTypes = {
  router: PropTypes.object.isRequired
}


LoginForm.propTypes = {
  from: PropTypes.object.isRequired
}


export default connect(null, { login })(LoginForm);

export function setCurrentUser(token) { //action function to set user from given jwtToken
  return {
    type: SET_CURRENT_USER,
    user: token.user
  }
}

export function login(data) {
  return dispatch => {
    return axios.post('/users/login', data) //post login info to backend
    .then(res => {
      const token = res.data.token; //get the token from the response
      localStorage.setItem('jwtToken', token); //set the jwtToken
      dispatch(setCurrentUser(JWT.decode(token, 'authtoken'))); //dispatch currentUser action with the given decoded token
    })
  }
}

Answer 1

我不完全确定我们使用的是相同的react-router。但是我通常在设置中使用push。

import { push } from "react-router-redux";

export const changeUrl = location => dispatch => dispatch(push(location));

登录React-Redux后无法重定向

1 个答案: