Итак, у меня есть следующий маршрутизатор:
<Router>
<TopBar />
<Route path="/" exact component={Home} />
<Route path="/cadastro" exact component={SignUp} />
<Route path="/login" exact component={Login} />
<ProtectedRoute path="/perfil/:profileId" auth={props.auth} exact component={Profile} />
<Footer />
</Router>
Маршрут /perfil/:profileId
должен быть защищен только для аутентифицированных пользователей. Мой компонент ProtectedRoute выглядит следующим образом:
function ProtectedRoute({
component: Component,
dispatch,
auth,
...rest
}) {
return (
<Route
{...rest}
render={props =>
isAuthenticated() ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
}}
/>
)
}
/>
);
}
На основе результата isAuthenticated()
он решает, будет ли пользователь обращаться к странице или нет. Моя проблема здесь в том, что функция isAuthenticated()
отправляет серверу запрос на проверку токена аутентификации, поэтому он асинхронный. Я не могу просто поместить async / await в мою функцию isAuthenticated, потому что появляется эта ошибка:
Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
У кого-то есть идеи, как решить эту проблему? Все мои логи аутентификации c находятся на стороне сервера, для меня нет смысла хранить только логи проверки c на стороне клиента только для решения этой проблемы. Спасибо:)