Javascript 使用React成功登录后如何重定向用户

我有这样一个LoginForm组件：

// ...
import { connect } from 'react-redux';
import { userLogin } from '../../store/actions/authActions';

class LoginForm extends Component {
  state = {
    email: '',
    password: ''
  };

  handleInputChange = event => {
    // ...
  }

  handleFormSubmit = event => {
    this.preventDefault();
    this.props.userLogin(this.state);
  }

  render() {
    return (
       // ....
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    userLogin: loginData => dispatch(userLogin(loginData))
  }
}

export default connect(null, mapDispatchToProps)(LoginForm);

export const userLogin = payload => {
  return dispatch => {
    API.post('/auth', payload)
      .then(response => {
        const { auth_token, current_user } = response.data;
        localStorage.setItem('auth_token', auth_token);
        dispatch(_userLogin(current_user.data));
        history.push('/');
      })
      .catch(error => {
        localStorage.removeItem('auth_token');
        dispatch(_userLogout(error.response));
      });
  };
};

export const userLogin = payload => {
  return async dispatch => {
    try {
      const response = await API.post('/auth', payload);
      const { auth_token, current_user } = response.data;
      localStorage.setItem('auth_token', auth_token);
      dispatch(_userLogin(current_user.data));

      console.log(response);
      history.push('/');
    } catch (error) {
      localStorage.removeItem('auth_token');
      dispatch(_userLogout(error));
    }
  };
};

对于

authActions.js

我有以下内容：

import API from '../../utils/API';
import { USER_LOGIN, USER_LOGOUT } from './authTypes';

const _userLogin = payload => {
  return {
    type: USER_LOGIN,
    payload,
  };
};

const _userLogout = payload => {
  return {
    type: USER_LOGOUT,
    payload,
  };
};

export const userLogin = payload => {
  return dispatch => {
    API.post('/auth', payload)
      .then(response => {
        const { auth_token, current_user } = response.data;
        localStorage.setItem('auth_token', auth_token);
        dispatch(_userLogin(current_user.data));
      })
      .catch(error => {
        localStorage.removeItem('auth_token');
        dispatch(_userLogout(error.response));
      });
  };
};

我的问题是，成功登录后如何重定向用户。我已经试过这样的方法：

• 使用以下内容创建

  history.js

  文件：

并更改

userLogin

操作，如下所示：

// ...
import { connect } from 'react-redux';
import { userLogin } from '../../store/actions/authActions';

class LoginForm extends Component {
  state = {
    email: '',
    password: ''
  };

  handleInputChange = event => {
    // ...
  }

  handleFormSubmit = event => {
    this.preventDefault();
    this.props.userLogin(this.state);
  }

  render() {
    return (
       // ....
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    userLogin: loginData => dispatch(userLogin(loginData))
  }
}

export default connect(null, mapDispatchToProps)(LoginForm);

export const userLogin = payload => {
  return dispatch => {
    API.post('/auth', payload)
      .then(response => {
        const { auth_token, current_user } = response.data;
        localStorage.setItem('auth_token', auth_token);
        dispatch(_userLogin(current_user.data));
        history.push('/');
      })
      .catch(error => {
        localStorage.removeItem('auth_token');
        dispatch(_userLogout(error.response));
      });
  };
};

export const userLogin = payload => {
  return async dispatch => {
    try {
      const response = await API.post('/auth', payload);
      const { auth_token, current_user } = response.data;
      localStorage.setItem('auth_token', auth_token);
      dispatch(_userLogin(current_user.data));

      console.log(response);
      history.push('/');
    } catch (error) {
      localStorage.removeItem('auth_token');
      dispatch(_userLogout(error));
    }
  };
};

但这会阻止登录工作。由于某些原因，通过此更改，localStorage和状态不会更新

更新1： 我将我的

userLogin

操作更改为使用async/await，如下所示：

// ...
import { connect } from 'react-redux';
import { userLogin } from '../../store/actions/authActions';

class LoginForm extends Component {
  state = {
    email: '',
    password: ''
  };

  handleInputChange = event => {
    // ...
  }

  handleFormSubmit = event => {
    this.preventDefault();
    this.props.userLogin(this.state);
  }

  render() {
    return (
       // ....
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    userLogin: loginData => dispatch(userLogin(loginData))
  }
}

export default connect(null, mapDispatchToProps)(LoginForm);

export const userLogin = payload => {
  return dispatch => {
    API.post('/auth', payload)
      .then(response => {
        const { auth_token, current_user } = response.data;
        localStorage.setItem('auth_token', auth_token);
        dispatch(_userLogin(current_user.data));
        history.push('/');
      })
      .catch(error => {
        localStorage.removeItem('auth_token');
        dispatch(_userLogout(error.response));
      });
  };
};

export const userLogin = payload => {
  return async dispatch => {
    try {
      const response = await API.post('/auth', payload);
      const { auth_token, current_user } = response.data;
      localStorage.setItem('auth_token', auth_token);
      dispatch(_userLogin(current_user.data));

      console.log(response);
      history.push('/');
    } catch (error) {
      localStorage.removeItem('auth_token');
      dispatch(_userLogout(error));
    }
  };
};

通过此更改，localStorage上的令牌和状态将更新。查看地址栏（浏览器），我可以看到重定向工作正常（URL已更新）。但是页面没有刷新，我仍然看到

LoginForm

组件，而不是我重定向到的页面的组件

我的路线定义如下所示：

function AppRouter() {
  return (
    <Router>
      <Switch>
        <ProtectedRoute exact path="/" component={Dashboard} />
        <Route exact path="/login" component={LoginForm} />
        <Route exact path="/signup" component={SignupForm} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

函数批准程序（）{
返回(
);
}

为什么要使用redux并使流程复杂化？您应该将authoActions.js作为类导入并执行请求（而不是作为prop回调）。当承诺从提取中解析时，您可以从那里重定向。身份验证令牌或会话id应保存为http cookie，而不是保存到本地存储。

找到的解决方案：

将my

userLogin

action creator更改为使用async/await后，如下所示：

export const userLogin = payload => {
  return async dispatch => {
    try {
      const response = await API.post('/auth', payload);
      const { auth_token, current_user } = response.data;
      localStorage.setItem('auth_token', auth_token);
      dispatch(_userLogin(current_user.data));

      console.log(response);
      history.push('/');
    } catch (error) {
      localStorage.removeItem('auth_token');
      dispatch(_userLogout(error));
    }
  };
};

我还必须更改路线定义。首先更改了导入：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

到

然后将历史记录发送到路由器：

<Router history={history}>
      <Switch>
        <ProtectedRoute exact path="/" component={Dashboard} />
        <Route exact path="/login" component={LoginForm} />
        <Route exact path="/signup" component={SignupForm} />
        <Route component={NotFound} />
      </Switch>
</Router>