Как правильно реализовать PrivateRoute ???

Question

[m_frost]

Крч такой вопрос есть PrivateRoute которий чекает в redux store есть ли залогинений пользователь в системе, я фетчу юзера по токенау с локал сторедж и по дефолту он null а после фетча если он успешен пользователь появляется в системе. Проблема в том, что пока проходит фетч юзера PrivateRoute уже редирект пользователя как незалогиненого. Ко мне это решить типа как то асинхронно проверять пользователь сфетчился уже и если нет то редиректиты, но моих знаний недостаточно чтобы это решить возможно кто-то из вас уже сталкивался с чем-то похожим (куки не предлагать).

Comments

[Yustas Alexu]

Код покажите, без кода это гадание на кофейной гуще.

[m_frost]

export function fetchViewer() {
  return async function fetchViewerThunk(dispatch) {
    try {
      dispatch(actions.fetchViewer.start());

      const result = await Api.Viewer.get();

      dispatch(actions.fetchViewer.success(result.data));
    } catch (err) {
      dispatch(actions.fetchViewer.error({ message: err.message }));
    }
  };
}

крч thunk на success закидает юзера в стор и мне надо что прайвет роут чекал юзера уже после фетча

[m_frost]

Yustas Alexu,

<Route
      {...rest}
      render={(props) =>
        rest.viewer ? <Component {...props} /> : <Redirect to={routes.login} />
      }
    />

[Yustas Alexu]

Для логина надо использовать обычный роут без проверки токена. Никаких дополнительных манипуляций не нужно, все и так должно заработать.

[Yustas Alexu]

Просто при успешном логине редиректить на любой защищенный роут. Например на домашнюю страницу.

[m_frost]

ти не понял е1то роут обе1ртка он чекает есть ли вювер и если нет то редиретит на логин им оборачиватю роути куда незалогинений пользователь заходить не должен

Answer 1

[Антон Спирин]

Например:

const PrivateRoute = ({ component: Component, render, isSignedIn, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      if (!isSignedIn) return (
        <Redirect
          to={{
            pathname: '/login',
            state: { referrer: props.history.location.pathname },
          }}
        />
      );

      if (render) return render({ ...props });

      return <Component {...props} />;
    }}
  />
);

const mapStateToProps = (state) => ({
  isSignedIn: isSignedInSelector(state),
});

export default connect(mapStateToProps)(PrivateRoute);

referrer тут передается для возможности возврата на целевую страницу после логина.

Comments

[m_frost]

Антон Спирин а ето не костиль??

[Антон Спирин]

m_frost, с чего бы?

[m_frost]

Антон Спирин, ок спаибо