[英]Can't redirect after login React-Redux
I'm relatively new to React and Redux, and I'm trying to manage a login system and authenticated routes. 我是React和Redux的新手,我正在尝试管理登录系统和经过身份验证的路由。 I currently have a login form that calls an action called
login
on submit, which changes the redux state to have isAuthenticated
set to true
and user
set to whatever the user is. 我目前有一个登录表单,该表单调用一个称为
login
上的login的操作,该操作将redux状态更改为isAuthenticated
设置为true
并且user
设置为任何用户。
I want to redirect the user back to the previous page from wherever they are logging in from, but when I log in, it gets redirected back to the home page before I get the chance to change the state of the login form to redirect back to referral, the component gets unmounted. 我想将用户从任何登录位置重定向到上一页,但是当我登录时,它将被重定向回到主页,然后才有机会更改登录表单的状态以重定向回引用后,该组件将被卸载。
The code for the login form and login redux action is shown below. 登录表单和登录redux操作的代码如下所示。 Thanks in advance for your help.
在此先感谢您的帮助。
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 }) } }
I'm not entirely sure that we're using the same react-router. 我不完全确定我们使用的是相同的react-router。 But I usually use push in my setup.
但是我通常在设置中使用push。
import { push } from "react-router-redux";
export const changeUrl = location => dispatch => dispatch(push(location));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.