Как перенаправить после входа в представление UserProfile

Question

Я использую react-redux для логики входа в мое приложение reactjs.Обычный логин работает просто отлично.Но я пытаюсь перенаправить на /profile, когда пользователь не заполнил некоторую информацию для своего UserProfile.Если у пользователя уже есть профиль, перенаправьте его на / после входа в систему.

У меня есть API, чтобы проверить, есть ли у пользователя профиль.http://127.0.0.1:8000/api/hasProfile/

Login.js

handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.onAuth(values.userName, values.password);
        this.props.history.push('/profile/');
      }
    });
  }

const mapDispatchToProps = dispatch => {
    return {
        onAuth: (username, password) => dispatch(actions.authLogin(username, password))
    }
}

auth.js

export const authLogin = (username, password) => {
    return dispatch => {
        dispatch(authStart());
        axios.post('http://127.0.0.1:8000/rest-auth/login/', {
            username: username,
            password: password
        })
        .then(res => {
            const token = res.data.key;
            const expirationDate = new Date(new Date().getTime() + 3600 * 1000);
            localStorage.setItem('token', token);
            localStorage.setItem('expirationDate', expirationDate);
            dispatch(authSuccess(token));
            dispatch(checkAuthTimeout(3600));
        })
        .catch(err => {
            dispatch(authFail(err))
        })
    }
}

Что было бы хорошим способом для достижения этой цели?добавить еще один .then в authLogin для вызова API hasProfile?Но где будет лучшее место для перенаправления на «/» или «/ profile» на основе ответа от hasProfile?

redurs.js

const initialState = {
    token: null,
    error: null,
    loading: false
}

const authSuccess = (state, action) => {
    return updateObject(state, {
        token: action.token,
        error: null,
        loading: false
    });
}
...

auth.js

export const authSuccess = token => {
    return {
        type: actionTypes.AUTH_SUCCESS,
        token: token
    }
}
...

Answer 1

Я решаю эту проблему с помощью this.props.history.push ('/') внутри handleSubmit и затем вызываю checkIfProfileExists из componentWillReceiveProps внутри '/'

checkIfProfileExists = (token) => {
     axios.defaults.headers = {
     "Accept": "application/json",
     "Content-Type": "application/json",
     'Authorization': "Token " + token
     }


     axios.get('http://127.0.0.1:8000/api/hasProfile').then(res => {

     let hasProfile = res.data[0].hasProfile
     if(hasProfile) {
         this.props.history.push('/');
     }
     else {
         this.props.history.push('/profile/');
     }
 })
}

componentWillReceiveProps(newProps) {

    this.checkIfProfileExists(newProps.token)

}

Answer 2

Вы можете проверить, есть ли у вашего пользователя профиль или нет внутри вашего метода входа в бэкэнд, а затем вернуть обе переменные, такие как

{
  token: "your token",
  hasProfile: true
}

Затем вы можете отобразить нужный компонент на основе этого

render() {
  const { user } = this.props;

  if (user&& user.hasProfile) {
    return <Home />;
  }

  if (user&& !user.hasProfile) {
    return <Profile />;
  }

  return <Login />;

}