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

Question

I have a LoginForm component like this:

// ...
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);

and for authActions.js I have the following content:

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

My problem is, how to redirect the user after a successful login. I already tried something like:

• creating a history.js file with the following:

import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

and change the userLogin action like this:

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

But this prevents the Login to work. for some reason, with this change, the localStorage and the state are not updated.

UPDATE 1:

I changed my userLogin action to use async/await like this:

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

With this change, the token on localStorage and the state are updated. And looking at the address bar (browser), I can see that the redirect works (URL is updated). But the page is not refreshed, I still see the LoginForm component instead of the component of the page I redirected to.

My routes definition looks like:

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

Why are you using redux and complicating your process? You should import the authActions.js as a class and perform the request (not as a prop callback). As the promise resolves from the fetch, you can redirect from there. The auth token or session id should be saved as a http cookie instead of saving it to localStorage.

Answer 2

Solution found:

After changing my userLogin action creator to use async/await like this:

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

I had also to change the routes definition. First changed the imports:

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

to

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

and then pas thw history to the router:

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