为不同的用户呈现不同的组件？

Question

我为管理员医生和用户设置了 3 个登录名，需要为每个用户呈现不同的仪表板。

我在 MongoDB 中设置了一个表用户。其中有 IsAdmin 和 IsDoctor 字段。

我该怎么做呢？

function Home() {
  const [doctors, setDoctors] = useState([]);
  const dispatch = useDispatch();
  const { user } = useSelector((state) => state.user);

  const getData = async () => {
    try {
      dispatch(showLoading());
      const response = await axios.get(
        "http://localhost:5000/api/user/get-all-approved-doctors",
        {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        }
      );
      dispatch(hideLoading());
      if (response.data.success) {
        setDoctors(response.data.data);
      }
    } catch (error) {
      dispatch(hideLoading());
    }
  };

  useEffect(() => {
    getData();
  }, []);
  

  return (
    <div id="page-top">
      <div id="wrapper">
        <Sidebar />
        <div id="content-wrapper" class="d-flex flex-column">
          <div id="content">
            <Navbar />
            <div class="container-fluid">
              <Breadcrumb />
             // here i want to render diffrent dashboard page content
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;

我期望为不同的用户呈现不同的内容。用户具有属性 isAdmin: false 和 isDoctor: true。

Answer 1

要为不同的用户呈现不同的内容，您可以使用条件语句来检查用户的isAdmin 和isDoctor 属性并根据这些值呈现适当的内容。

例如，您可以使用 switch 语句来检查 isAdmin 和 isDoctor 属性的值并为每种情况呈现相应的内容：

const Home = () => {
  // ...

  return (
    <div id="page-top">
      <div id="wrapper">
        <Sidebar />
        <div id="content-wrapper" class="d-flex flex-column">
          <div id="content">
            <Navbar />
            <div class="container-fluid">
              <Breadcrumb />
              {/* Use a switch statement to check the values of the isAdmin and isDoctor properties and render the corresponding content */}
              {/* The `default` case is used to render the content for any other user who is not an admin or a doctor */}
              {/* Note that you can also use if-else statements instead of a switch statement if you prefer */}
              {/* The content you render for each case should be the content for the corresponding dashboard */}
              switch (user.isAdmin, user.isDoctor) {
                case true, true:
                  return <AdminDoctorDashboard />;
                case true, false:
                  return <AdminDashboard />;
                case false, true:
                  return <DoctorDashboard />;
                default:
                  return <UserDashboard />;
              }
            }
          </div>
        </div>
      }
    </div>
  );
};

在这里，AdminDoctorDashboard、AdminDashboard、DoctorDashboard 和UserDashboard 组件代表每种类型用户的不同仪表板。您可以创建这些组件并在相应组件中包含每个仪表板的适当内容。

一旦用户的 isAdmin 和 isDoctor 属性已知，您还可以使用 useEffect 挂钩获取仪表板的数据。这样，您可以确保为每种类型的用户提取正确的数据。

例如：

const Home = () => {
  // ...

  useEffect(() => {
    if (user.isAdmin && user.isDoctor) {
      // Fetch data for the AdminDoctorDashboard component
    } else if (user.isAdmin) {
      // Fetch data for the AdminDashboard component
    } else if (user.isDoctor) {
      // Fetch data for the DoctorDashboard component
    } else {
      // Fetch data for the UserDashboard component
    }
  }, [user.isAdmin, user.isDoctor]);

  // ...
};

这样，您可以根据isAdmin 和isDoctor 属性的值为不同的用户呈现不同的内容。