У меня есть компонент PrivateRoute, который обертывает другие компоненты, для доступа к которым требуется аутентификация. PrivateRoute вызывает API, который проверяет аутентификацию, и тем временем отображает компонент Loading, прежде чем решить, следует ли перенаправлять, аутентифицирован пользователь или нет.
Когда пользователь сначала входит в систему через Google OAuth, я хочу отобразить ComponentA, который защищен PrivateRoute.
Идеальным потоком здесь будет:
Пользователь аутентифицирует => перенаправляет на PrivateRoute => Loading компонент визуализируется, пока завершается вызов API => ComponentA отображается как только что аутентифицированный пользователь
Однако я получаю что-то вроде:
Пользователь аутентифицируется => ComponentA отображается кратко = > перенаправление на PrivateRoute => Loading компонент визуализируется, пока завершается вызов API => ComponentA отображается как пользователь, только что аутентифицированный
Это приводит к тому, что все, что будет отображаться после успешной аутентификации (ComponentA в этом случае), чтобы на короткое время показать его пользователю, прежде чем он продолжит движение в идеальном направлении. Кто-нибудь раньше сталкивался с такой проблемой? Спасибо!
PrivateRoute код ниже:
import { useSelector } from "react-redux";
import { isLoaded, isEmpty } from "react-redux-firebase";
import Loading from './Auth/Loading'
import get from "lodash/get";
const Private = ({ component: Component, ...rest }) => {
const auth = useSelector(state => state.firebase.auth)
const pathname = get(rest, "location.state.from.pathname");
return (
<Route
{...rest}
render={(props) =>
isLoaded(auth) ? (
!isEmpty(auth) ? (
<Component {...props} {...rest} oldPath={pathname} />
) : (
<Redirect
to={{
pathname: pathname || "/",
state: { from: props.location },
}}
/>
)
) : (
<Loading />
)
}
/>
);
};