Как перенаправить пользователя после успешного входа в систему с помощью React

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

Решение найдено:

После изменения моего 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>

Answer 2

Почему вы используете редукс и усложняете свой процесс?Вы должны импортировать authActions.js как класс и выполнить запрос (не как обратный вызов prop).Как только обещание разрешается из выборки, вы можете перенаправить оттуда.Аутентификационный токен или идентификатор сеанса должны быть сохранены в виде файла cookie http, а не сохранены в localStorage.