在每个组件渲染之前，如何在ReactJs中检查用户是否为loggedIn？

import React from 'react';

// 高阶组件，用于检查用户是否为loggedIn
function withAuth(Component) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        loggedIn: false, // 假设初始状态为未登录
      };
    }

    componentDidMount() {
      // 在组件挂载后，可以进行登录状态的检查
      // 这里可以根据实际情况调用后端接口或者读取本地存储等方式来获取登录状态
      const loggedIn = checkLoginStatus(); // 假设checkLoginStatus()函数用于检查登录状态
      this.setState({ loggedIn });
    }

    render() {
      const { loggedIn } = this.state;
      if (loggedIn) {
        // 如果用户已登录，则渲染原始组件
        return <Component {...this.props} />;
      } else {
        // 如果用户未登录，则可以渲染一个登录提示组件或者跳转到登录页面等
        return <div>Please login to view this content.</div>;
      }
    }
  };
}

// 原始组件
class MyComponent extends React.Component {
  render() {
    return <div>Welcome to my app!</div>;
  }
}

// 使用高阶组件包装原始组件
const MyComponentWithAuth = withAuth(MyComponent);

export default MyComponentWithAuth;