Пользовательский маршрут для обработки авторизованных пользователей?

Question

Я хотел бы создать собственный экспресс-маршрут, который позволил бы определить, имеет ли пользователь право доступа к странице или нет.

До сих пор я работал, используя что-то вроде этого:

import React from 'react';
import { Route } from 'react-router-dom';

import { AuthenticationContext } from '../../contexts/authentication/context';

import Unauthorized from '../Unauthorized';

import axios from 'axios';

const ProtectedRoute = ({ component: Component, redirect: Redirect, contextProvider: ContextProvider, path, ...routeProps }) => {

  const { authenticationState: {isAuthenticated, isFetchingTheUser, currentUser} } = React.useContext(AuthenticationContext)

  const [authorized, setAuthorized] = React.useState([]);
  const [isFetchingAuthorizations, setIsFetchingAuthorizations] = React.useState(false);

  React.useEffect(() => {

    setIsFetchingAuthorizations(true);
    axios.get(`${global.REST_API_ADDR}/api/pages/${encodeURIComponent(path)}`)
    .then((response) => {
      setAuthorized(response.data.authorized);
      setIsFetchingAuthorizations(false);
    })
    .catch((error) => {
      setIsFetchingAuthorizations(false);

      // console.log("Protected route use Effect error : ", error);
    })
  }, [path])


  return (
    <Route {...routeProps}
      render={ props => {

        if(isFetchingTheUser || isFetchingAuthorizations) return <div>Chargement...</div>

        if(isAuthenticated && authorized.includes(currentUser.rank)){
          return ContextProvider ? <ContextProvider><Component {...props} /></ContextProvider> : <Component {...props} />
        }else if(isAuthenticated && !authorized.includes(currentUser.rank)) {
          return <Unauthorized {...props} />;
        }
        else{
          return <Redirect {...props}/>;
        }
    }}/>
  );

};

export default ProtectedRoute;

Проблема здесь в том, что если пользователь изменяет маршруты во второй раз, компонент сохранит предыдущий авторизованный массив в течение нескольких миллисекунд, отобразит компонент, и если у компонента есть какой-либо вид useEffect с некоторыми вызовами APIэто выдаст ошибку в консоли. Я хотел бы знать, есть ли способ предотвратить это? Как, например, очистить состояние после того, как маршрут рендерит компонент?

Заранее спасибо,

РЕДАКТИРОВАТЬ 1: с точки зрения пользователя нет никаких визуальных ошибок или задержек, но как разработчик я имеютрудно оставить сообщение об ошибке в консоли, если есть какой-либо способ избежать его