Защита страниц в реакции, не блокируя маршрут

Question

Следующая проблема: я пытаюсь создать систему аутентификации в реакции, которая позволяет пользователю войти в систему, зарегистрироваться и сбросить пароль. Проблема в том, что я хочу позволить пользователю go определенные маршруты, такие как / profile, но отображать содержимое, если он вошел в систему. Если он не вошел в систему, я хочу просто отобразить панель навигации и небольшой компонент входа ,

До сих пор я пробовал что-то вроде этого: (Чтобы сделать его более читабельным, я пропустил блоки действий)

const Profile = ({ history }) => {
  const [values, setValues] = useState({
    username: "",
    email: "",
    password: ""
  });

  const [isShowingAuth, setIsShowingAuth] = useState(null);

  const { username, email, password } = values;


  useEffect(() => {

    if (!isLoggedIn()) {
      setIsShowingAuth("login");
    } else {
      loadProfileData();
    }
  }, []);

  const loadProfileData = () => {
    const userEmail = isLoggedIn().email;
    const token = getCookie("token");

    axios({
      method: "GET",
      url: `${process.env.REACT_APP_BACKEND_URL}/user`,
      headers: { Authorization: `Bearer ${token}` },
      data: { userEmail }
    })
      .then(response => {
        // Do something
      })
      .catch(error => {
        // Do something
      });
  };

  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

  const handleUpdateUserSubmit = e => {
    e.preventDefault();

    const token = getCookie("token");

    axios({
      method: "PUT",
      url: `${process.env.REACT_APP_BACKEND_URL}/user/update`,
      headers: { Authorization: `Bearer ${token}` },
      data: { username, password, email }
    })
      .then(response => {
        // Do something 
      })
      .catch(error => {
        // Do something
        }

        store.addNotification({
          ...defaultSettings,
          type: "danger",
          title: "User update error",
          message: error.response.data.errorMsg
        });
      });
  };


  const deleteAccount = () => {
    const token = getCookie("token");

    axios({
      method: "DELETE",
      url: `${process.env.REACT_APP_BACKEND_URL}/user`,
      headers: { Authorization: `Bearer ${token}` }
    })
      .then(response => {
        // Do something
      })
      .catch(error => {
        // Do something
  };

  const showDeleteConfirmation = () => {
      // Do something
  };

  return (
    <Layout isShowingAuth={isShowingAuth}>
      {isLoggedIn() && isLoggedIn().role === "member" ? (
        <>
          <ReactNotifications />
          <h1 className='mt-5 pl-3'>Profile</h1>
          <form className='form col-md-6 mt-3'>
            <div className='form-group'>
              <label>Name</label>
              <input
                type='text'
                className='form-control'
                value={username}
                onChange={handleChange("username")}
              />
            </div>
            <div className='form-group'>
              <label>Email</label>
              <input
                type='email'
                className='form-control'
                value={email}
                onChange={handleChange("email")}
                disabled
              />
            </div>
            <div className='form-group'>
              <label>Password</label>
              <input
                type='password'
                className='form-control'
                value={password}
                onChange={handleChange("password")}
                placeholder='Enter your new password'
                autoComplete='on'
              />
            </div>
            <button type='submit' className='btn btn-outline-primary' onClick={handleUpdateUserSubmit}>
              Update User
            </button>
            <button type='button' className='btn btn-outline-danger ml-3' onClick={showDeleteConfirmation}>
              Delete account
            </button>
            <button type='button' className='btn btn-outline-danger ml-3 mt-2 mt-md-0'>
              Want to change your email?
            </button>
          </form>
          {showAlert}
        </>
      ) : null}
    </Layout>
  );
};

В основном я проверяю метод isLoggedIn(), если пользователь вошел в систему. Если он есть, я хочу визуализировать контент, если нет, я возвращаю только макет. Макет содержит панель навигации.

Проблема теперь в том, что, как только пользователь входит в систему, находясь на маршруте / профиле, компонент не перемонтируется, что означает, что useEffect(()=> {},[]) больше не вызывается и Данные моего профиля не загружены.

Я уже пытался обновить sh страницу после входа в систему через history.push(history.location.pathname), но это также не вызывает перемонтажа.

Мне не интересно, как правильно вызвать перемонтировать после входа в систему, и если способ настройки моей системы аутентификации безопасен или если есть лучшие решения.

Любая помощь / обратная связь приветствуется спасибо:)