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

Question

[Jorlian]

Всем привет!
Вопрос такой, как в PrivateRoute сделать запрос на бэк и в зависимости от ответа, рендерить страницу!

Компонента App

export default function App() {
    return (
        <Router>
            <div>
                <Switch>
                    <Route path="/login">
                        <LoginPage />
                    </Route>
                    <PrivateRoute path="/messenger">
                        <Messenger />
                    </PrivateRoute>
                </Switch>
            </div>
        </Router>
    );
}

PrivateRoute

function PrivateRoute({children, ...rest}) {
    return (
        <Route
            {...rest}
            render={({location}) =>
                tokenStatus ? (
                    children
                ) : (
                    <Redirect
                        to={{
                            pathname: "/login",
                            state: {from: location}
                        }}
                    />
                )
            }
        />
    );
}

Получается мне надо сделать вот такой запрос на бэк

let token = Cookies.get('token');
        isTokenValid(token)
            .then(response => {
                    if (response.ok) {
                        // tokenStatus = true или вызов action
                    }
                }
            )
    }

export  function isTokenValid(token) {
    return  fetch(`${Url}:${Port}/is-token-valid`, {
        method: 'POST',
        body: JSON.stringify(token)
    })
}

и если ответ 200 то поменять tokenStatus на true и рендерить /messenger
по дефолту tokenStatus = false и рендерится /login
суть вопроса такова, не знаю где вызвать запрос, чтобы до рендера tokenStatus уже поменялся

При логине ответом возвращается токен и записывается в Cookie

Answer 1

[Robur]

это надо делать не в PrivateRoute а где-то в другом месте (например при старте приложения, или после логина) и класть в стейт приложения.
PrivateRoute должен просто смотреть в стейт - можно показывать или нельзя, никаких запросов делать не должен.