Question

我有一个这样的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);

对于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文件：

import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

并像这样更改userLogin动作：

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));
      });
  };
};

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

更新1：

我将userLogin操作更改为使用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));
    }
  };
};

通过此更改，将更新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>
  );
}

Answer 1

为什么要使用redux并使过程复杂化？您应该将authActions.js导入为一个类并执行请求（而不是作为prop回调）。当承诺从获取中解决后，您可以从那里重定向。身份验证令牌或会话ID应该另存为http cookie，而不是将其保存到localStorage。

Answer 2

找到解决方案：

将我的userLogin动作创建者更改为使用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';

到

import { 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>

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

更新1：

2 个答案: