reactjs 针对不同用户的不同布局react js和ant设计

11dmarpk  于 5个月前  发布在  React
关注(0)|答案(1)|浏览(56)

我想我有一个管理员和导师和学生的 Jmeter 板布局.如果用户是一个管理员，他可以访问多个. routes.如果用户是一个导师，他可以访问2或3路线.也学生喜欢这个.这意味着布局是相同的.只需要显示和隐藏一些sidebard菜单（Ant Design）基于用户角色我怎么能在这里做？我应该改变布局为每个用户的我应该使用这里的条件渲染？
记住：对于每个用户，即管理员，导师，学生，他们必须在 Jmeter 板路由（“/dashboard”）中看到不同的设计模式。我的意思是，如果用户是管理员，他可以看到一个页面是（“/dashboard”）路由，如果用户是导师，他可以看到另一个页面（“/dashboard”）我该如何处理？像这样的图像。
使用ant design的dashboard布局代码：

import { useLocation } from "react-router-dom";

import { useState } from "react";
import logo from "../assets/logo.svg";
import { MenuOutlined, SearchOutlined } from "@ant-design/icons";
import { IoIosNotificationsOutline } from "react-icons/io";

import {
  Layout,
  Menu,
  Button,
  theme,
  Input,
  Badge,
  ConfigProvider,
  Select,
} from "antd";
import { Link, Outlet, useNavigate } from "react-router-dom";
import { sidebarItems } from "../utiles/sidebarItem";
import { sidebardThemes } from "../themes/Index";

const { Header, Sider, Content } = Layout;
const DashboardLayout = () => {
  // const [selectedKey, setSelectedKey] = useState(sidebarItems[0].key);
  const navigate = useNavigate();
  const [collapsed, setCollapsed] = useState(false);
  const [selectedLanguage, setSelectedLanguage] = useState();
  const { pathname } = useLocation();

  const selectedKey = sidebarItems.find((item) =>
    pathname.startsWith(item.key)
  )?.key;

  console.log(selectedKey);
  console.log(pathname);
  const handleSelectLanguage = (value: any) => {
    setSelectedLanguage(value);
    // i18n.changeLanguage(selectedLanguage);
    localStorage.setItem("lang", value);
  };
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const handleMenuSelect = ({ key }: { key: string }) => {
    // setSelectedKey(key);
    if (key === "/logout") {
      console.log("dsfmks");
    } else {
      navigate(key);
    }
  };

  const options = [
    {
      value: "english",
      label: (
        <div style={{ display: "flex", alignItems: "center" }}>
          <img
            src="https://cdn.britannica.com/29/22529-004-ED1907BE/Union-Flag-Cross-St-Andrew-of-George.jpg"
            alt="English"
            style={{ marginRight: 8, width: 16, height: 16 }}
          />
          English
        </div>
      ),
    },
  ];
  return (
    <ConfigProvider theme={sidebardThemes}>
      <Layout>
        <Sider
          width="220px"
          trigger={null}
          collapsible
          collapsed={collapsed}
          style={{
            backgroundColor: "#2492EB",
            height: "100vh",

            zIndex: 2,
            overflow: "auto",
            position: "fixed",
          }}
        >
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              height: "inherit",
            }}
          >
            <div className="demo-logo-vertical" />
            <div
              style={{
                backgroundColor: "white",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "100px",
              }}
            >
              <img
                style={{
                  height: "40px",
                  width: "180px",
                }}
                src={logo}
                alt=""
              />
            </div>
            <Menu
              mode="inline"
              style={{
                backgroundColor: "#2492EB",
                color: "white",
                marginTop: "10px",
                flexGrow: 1,
                display: "flex",
                flexDirection: "column",
                paddingBlockEnd: "1rem",
                // height: "100%",
              }}
              selectedKeys={[selectedKey ? selectedKey : "/dashboard"]}
              // defaultSelectedKeys={[sidebarItems[0].key]}
              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
              // @ts-ignore
              items={sidebarItems}
              onClick={handleMenuSelect}
            ></Menu>
          </div>
        </Sider>

        <Layout>
          <Header
            style={{
              position: "fixed",
              width: "100vw",
              height: "100px",
              zIndex: 1,
              padding: 0,
              background: colorBgContainer,
              display: "flex",
              justifyContent: "space-between",
              paddingRight: "65px",
              // paddingRight: "60px",
            }}
          >
            <div className="" style={{ display: "flex", alignItems: "center" }}>
              <Button
                type="text"
                icon={collapsed ? <MenuOutlined /> : <MenuOutlined />}
                onClick={() => setCollapsed(!collapsed)}
                style={{
                  marginLeft: collapsed ? "130px" : "270px",
                  fontSize: "16px",
                  width: 45,
                  height: 45,
                  marginRight: "10px",
                }}
              />
              <ConfigProvider
                theme={{
                  components: {
                    Input: {
                      colorBgContainer: "rgb(244, 244, 244)",
                    },
                  },
                }}
              >
                <Input
                  allowClear={true}
                  prefix={<SearchOutlined className="text-[#A7A7A7] " />}
                  placeholder="search here"
                  className="h-[50px] w-[461px] border-0"
                />
              </ConfigProvider>
            </div>

            <div
              style={{ display: "flex", alignItems: "center", lineHeight: 0 }}
            >
              <div className="" style={{ marginRight: "20px" }}>
                <Select
                  options={options}
                  defaultValue={options[0]}
                  value={selectedLanguage}
                  style={{ width: 150 }}
                  onChange={handleSelectLanguage}
                ></Select>
              </div>
              <div>
                <Link to="/notification " className="flex items-center">
                  <Badge count={5} className="cursor-pointer">
                    <IoIosNotificationsOutline
                      style={{ width: "30px", height: "30px" }}
                    />
                  </Badge>
                </Link>
              </div>
              <div className="ms-[20px]">
                <div className="flex items-center gap-x-4">
                  <img
                    src="https://t.ly/18Nvk"
                    className="w-[40px] h-[40px] object-cover rounded-full"
                    alt=""
                  />

                  <div className="my-[2px]">
                    <h1 className="font-semibold">Mr. Admin John Doe</h1>
                  </div>
                </div>
              </div>
            </div>
          </Header>
          <Content
            style={{
              paddingTop: "130px",

              paddingLeft: collapsed ? "130px" : "270px",
              paddingRight: "50px",
              background: "#F6F8FA",

              overflow: "auto",
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
};

export default DashboardLayout;

字符串
侧边栏项目的代码：

import { MdOutlineDashboard } from "react-icons/md";
import { GoPeople } from "react-icons/go";
import { BsBook } from "react-icons/bs";
import { IoPersonCircleOutline } from "react-icons/io5";
import { LuFolders } from "react-icons/lu";
import { PiIdentificationCard } from "react-icons/pi";
import { BsCalendar2Event } from "react-icons/bs";
import { LuClipboardList } from "react-icons/lu";
import { HiOutlineCreditCard } from "react-icons/hi";
import { IoSettingsOutline } from "react-icons/io5";

import { LoginOutlined } from "@ant-design/icons";

const id = 1;
export const sidebarItems = [
  {
    key: "/dashboard",
    label: "Dashboard",
    icon: <MdOutlineDashboard />,
  },
  {
    key: "/students",
    label: "Students",
    icon: <GoPeople />,
  },
  {
    key: "/student/dashboard",
    label: "StudentDashboard",
    icon: <GoPeople />,
  },
  {
    key: `/profile/${id}`,
    label: "Profile",
    icon: <GoPeople />,
  },
  {
    key: "/courses",
    label: "Courses",
    icon: <BsBook />,
    children: [
      {
        key: "/courses",
        label: "All Courses",
      },
    ],
  },
  {
    key: "/mentors",
    label: "Mentors",
    icon: <IoPersonCircleOutline />,
  },
  {
    key: "/MentorsDashboard",
    label: "MentorsDashboard",
    icon: <IoPersonCircleOutline />,
  },
  {
    key: "/departments",
    label: "Departments",
    icon: <LuFolders />,
  },
  {
    key: "/attendence",
    label: "Attendence",
    icon: <PiIdentificationCard />,
  },
  {
    key: "/events",
    label: "Events",
    icon: <BsCalendar2Event />,
  },
  {
    key: "/class-schedule",
    label: "Class Schedule",
    icon: <LuClipboardList />,
  },
  {
    key: "/wallet",
    label: "Wallet",
    icon: <HiOutlineCreditCard />,
  },
  {
    key: "/setting",
    label: "setting",
    icon: <IoSettingsOutline />,
  },
  {
    key: "/divider",
    label: "divider",
    style: { margin: 0, border: 0, flexGrow: 1, visibility: "hidden" },
  },
  {
    key: "/logout",
    label: "Log Out",
    icon: <LoginOutlined />,
  },
];

型
路线代码：

import { createBrowserRouter } from "react-router-dom";

import SignIn from "../pages/Signin/Signin";
import Email from "../pages/ForgetPassword/Email/Email";
import Otp from "../pages/ForgetPassword/Otp/Otp";
import UpdatePassword from "../pages/ForgetPassword/updatePassword/UpdatePassword";
import Dashboardlayout from "../Layout/DashboardLayout";
import Dashboard from "../pages/Dashboard/Dashboard";
import Students from "../pages/Dashboard/Students/Students";

import Courses from "../pages/Dashboard/Courses/Courses";
import Addcourse from "../pages/Dashboard/Courses/Addcourse/Addcourse";
import EditCourse from "../pages/Dashboard/Courses/EditCourse/EditCourse";
import Mentors from "../pages/Dashboard/Mentors/Mentors";
import Department from "../pages/Dashboard/Department/Department";
import EditDepartment from "../pages/Dashboard/Department/EditDepartment/EditDepartment";
import Attendence from "../pages/Dashboard/Attendence/Attendence";
import Events from "../pages/Dashboard/Events/Events";
import ClassSchedule from "../pages/Dashboard/Class-Schedule/Class-Schedule";
import StudentProfile from "../pages/Dashboard/Students/EditStudent/StudentProfile";
import Profile from "../pages/Dashboard/Profile/Profile";
import MentorsDashboard from "../pages/Dashboard/Mentors/MentorsDashboard/MentorsDashboard";
import Wallet from "../pages/Dashboard/Wallet/Wallet";
import Setting from "../pages/Dashboard/Setting/Setting";
import LoginActivity from "../component/LoginActivity/LoginActivity";
import Notification from "../component/Notification/Notification";
import StudentDashbord from "../pages/Dashboard/StudentDashboard/StudentDashbord";
import StudentEnrolledCourse from "../pages/Dashboard/StudentDashboard/StudentEnrolledCourse/StudentEnrolledCourse";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <Dashboardlayout></Dashboardlayout>,
    children: [
      {
        path: "/",
        element: <Dashboard></Dashboard>,
      },
      {
        path: "/dashboard",
        element: <Dashboard></Dashboard>,
      },
      {
        path: "/students",
        element: <Students></Students>,
      },
      {
        path: "/profile/:id",
        element: <Profile />,
      },
      {
        path: "/students/profile/:id",
        element: <StudentProfile></StudentProfile>,
      },
      {
        path: "/student/dashboard",
        element: <StudentDashbord />,
      },
      {
        path: "/courses",
        element: <Courses></Courses>,
      },
      {
        path: "/courses/add",
        element: <Addcourse></Addcourse>,
      },
      {
        path: "/courses/edit/:id",
        element: <EditCourse></EditCourse>,
      },
      {
        path: "/mentors",
        element: <Mentors />,
      },
      {
        path: "/MentorsDashboard",
        element: <MentorsDashboard />,
      },
      {
        path: "/departments",
        element: <Department />,
      },
      {
        path: "/departments",
        element: <Department />,
      },
      {
        path: "/department/edit/:id",
        element: <EditDepartment />,
      },
      {
        path: "/attendence",
        element: <Attendence />,
      },
      {
        path: "/events",
        element: <Events />,
      },
      {
        path: "/class-schedule",
        element: <ClassSchedule />,
      },
      {
        path: "/wallet",
        element: <Wallet />,
      },
      {
        path: "/setting",
        element: <Setting />,
      },
      {
        path: "/setting/login-activity",
        element: <LoginActivity />,
      },
      {
        path: "/notification",
        element: <Notification />,
      },
      {
        path: "/student/dashboard/course/:id/:moduleName/:videoId",
        element: <StudentEnrolledCourse />,
      },
    ],
  },
  {
    path: "/signin",
    element: <SignIn></SignIn>,
  },
  {
    path: "/forgetpassword/email",
    element: <Email></Email>,
  },
  {
    path: "/forgetpassword/otp",
    element: <Otp></Otp>,
  },
  {
    path: "/forgetpassword/update",
    element: <UpdatePassword></UpdatePassword>,
  },
]);

型
我想我有一个管理员和导师和学生的 Jmeter 板布局.如果用户是一个管理员，他可以访问多个. routes.如果用户是一个导师，他可以访问2或3路线.也学生喜欢这个.这意味着布局是相同的.只需要显示和隐藏一些sidebard菜单（Ant Design）基于用户角色我怎么能在这里做？我应该改变布局为每个用户的我应该使用这里的条件渲染？
记住：对于每个用户，即管理员，导师，学生，他们必须在 Jmeter 板路由（“/dashboard”）中看到不同的设计模式。我的意思是，如果用户是管理员，他可以看到一个页面是（“/dashboard”）路由，如果用户是导师，他可以看到另一个页面（“/dashboard”）我该如何处理？像这样的图像。
使用ant design的dashboard布局代码：

import { useLocation } from "react-router-dom";

import { useState } from "react";
import logo from "../assets/logo.svg";
import { MenuOutlined, SearchOutlined } from "@ant-design/icons";
import { IoIosNotificationsOutline } from "react-icons/io";

import {
  Layout,
  Menu,
  Button,
  theme,
  Input,
  Badge,
  ConfigProvider,
  Select,
} from "antd";
import { Link, Outlet, useNavigate } from "react-router-dom";
import { sidebarItems } from "../utiles/sidebarItem";
import { sidebardThemes } from "../themes/Index";

const { Header, Sider, Content } = Layout;
const DashboardLayout = () => {
  // const [selectedKey, setSelectedKey] = useState(sidebarItems[0].key);
  const navigate = useNavigate();
  const [collapsed, setCollapsed] = useState(false);
  const [selectedLanguage, setSelectedLanguage] = useState();
  const { pathname } = useLocation();

  const selectedKey = sidebarItems.find((item) =>
    pathname.startsWith(item.key)
  )?.key;

  console.log(selectedKey);
  console.log(pathname);
  const handleSelectLanguage = (value: any) => {
    setSelectedLanguage(value);
    // i18n.changeLanguage(selectedLanguage);
    localStorage.setItem("lang", value);
  };
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const handleMenuSelect = ({ key }: { key: string }) => {
    // setSelectedKey(key);
    if (key === "/logout") {
      console.log("dsfmks");
    } else {
      navigate(key);
    }
  };

  const options = [
    {
      value: "english",
      label: (
        <div style={{ display: "flex", alignItems: "center" }}>
          <img
            src="https://cdn.britannica.com/29/22529-004-ED1907BE/Union-Flag-Cross-St-Andrew-of-George.jpg"
            alt="English"
            style={{ marginRight: 8, width: 16, height: 16 }}
          />
          English
        </div>
      ),
    },
  ];
  return (
    <ConfigProvider theme={sidebardThemes}>
      <Layout>
        <Sider
          width="220px"
          trigger={null}
          collapsible
          collapsed={collapsed}
          style={{
            backgroundColor: "#2492EB",
            height: "100vh",

            zIndex: 2,
            overflow: "auto",
            position: "fixed",
          }}
        >
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              height: "inherit",
            }}
          >
            <div className="demo-logo-vertical" />
            <div
              style={{
                backgroundColor: "white",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "100px",
              }}
            >
              <img
                style={{
                  height: "40px",
                  width: "180px",
                }}
                src={logo}
                alt=""
              />
            </div>
            <Menu
              mode="inline"
              style={{
                backgroundColor: "#2492EB",
                color: "white",
                marginTop: "10px",
                flexGrow: 1,
                display: "flex",
                flexDirection: "column",
                paddingBlockEnd: "1rem",
                // height: "100%",
              }}
              selectedKeys={[selectedKey ? selectedKey : "/dashboard"]}
              // defaultSelectedKeys={[sidebarItems[0].key]}
              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
              // @ts-ignore
              items={sidebarItems}
              onClick={handleMenuSelect}
            ></Menu>
          </div>
        </Sider>

        <Layout>
          <Header
            style={{
              position: "fixed",
              width: "100vw",
              height: "100px",
              zIndex: 1,
              padding: 0,
              background: colorBgContainer,
              display: "flex",
              justifyContent: "space-between",
              paddingRight: "65px",
              // paddingRight: "60px",
            }}
          >
            <div className="" style={{ display: "flex", alignItems: "center" }}>
              <Button
                type="text"
                icon={collapsed ? <MenuOutlined /> : <MenuOutlined />}
                onClick={() => setCollapsed(!collapsed)}
                style={{
                  marginLeft: collapsed ? "130px" : "270px",
                  fontSize: "16px",
                  width: 45,
                  height: 45,
                  marginRight: "10px",
                }}
              />
              <ConfigProvider
                theme={{
                  components: {
                    Input: {
                      colorBgContainer: "rgb(244, 244, 244)",
                    },
                  },
                }}
              >
                <Input
                  allowClear={true}
                  prefix={<SearchOutlined className="text-[#A7A7A7] " />}
                  placeholder="search here"
                  className="h-[50px] w-[461px] border-0"
                />
              </ConfigProvider>
            </div>

            <div
              style={{ display: "flex", alignItems: "center", lineHeight: 0 }}
            >
              <div className="" style={{ marginRight: "20px" }}>
                <Select
                  options={options}
                  defaultValue={options[0]}
                  value={selectedLanguage}
                  style={{ width: 150 }}
                  onChange={handleSelectLanguage}
                ></Select>
              </div>
              <div>
                <Link to="/notification " className="flex items-center">
                  <Badge count={5} className="cursor-pointer">
                    <IoIosNotificationsOutline
                      style={{ width: "30px", height: "30px" }}
                    />
                  </Badge>
                </Link>
              </div>
              <div className="ms-[20px]">
                <div className="flex items-center gap-x-4">
                  <img
                    src="https://t.ly/18Nvk"
                    className="w-[40px] h-[40px] object-cover rounded-full"
                    alt=""
                  />

                  <div className="my-[2px]">
                    <h1 className="font-semibold">Mr. Admin John Doe</h1>
                  </div>
                </div>
              </div>
            </div>
          </Header>
          <Content
            style={{
              paddingTop: "130px",

              paddingLeft: collapsed ? "130px" : "270px",
              paddingRight: "50px",
              background: "#F6F8FA",

              overflow: "auto",
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
};

export default DashboardLayout;

型
侧边栏项目的代码：

import { MdOutlineDashboard } from "react-icons/md";
import { GoPeople } from "react-icons/go";
import { BsBook } from "react-icons/bs";
import { IoPersonCircleOutline } from "react-icons/io5";
import { LuFolders } from "react-icons/lu";
import { PiIdentificationCard } from "react-icons/pi";
import { BsCalendar2Event } from "react-icons/bs";
import { LuClipboardList } from "react-icons/lu";
import { HiOutlineCreditCard } from "react-icons/hi";
import { IoSettingsOutline } from "react-icons/io5";

import { LoginOutlined } from "@ant-design/icons";

const id = 1;
export const sidebarItems = [
  {
    key: "/dashboard",
    label: "Dashboard",
    icon: <MdOutlineDashboard />,
  },
  {
    key: "/students",
    label: "Students",
    icon: <GoPeople />,
  },
  {
    key: "/student/dashboard",
    label: "StudentDashboard",
    icon: <GoPeople />,
  },
  {
    key: `/profile/${id}`,
    label: "Profile",
    icon: <GoPeople />,
  },
  {
    key: "/courses",
    label: "Courses",
    icon: <BsBook />,
    children: [
      {
        key: "/courses",
        label: "All Courses",
      },
    ],
  },
  {
    key: "/mentors",
    label: "Mentors",
    icon: <IoPersonCircleOutline />,
  },
  {
    key: "/MentorsDashboard",
    label: "MentorsDashboard",
    icon: <IoPersonCircleOutline />,
  },
  {
    key: "/departments",
    label: "Departments",
    icon: <LuFolders />,
  },
  {
    key: "/attendence",
    label: "Attendence",
    icon: <PiIdentificationCard />,
  },
  {
    key: "/events",
    label: "Events",
    icon: <BsCalendar2Event />,
  },
  {
    key: "/class-schedule",
    label: "Class Schedule",
    icon: <LuClipboardList />,
  },
  {
    key: "/wallet",
    label: "Wallet",
    icon: <HiOutlineCreditCard />,
  },
  {
    key: "/setting",
    label: "setting",
    icon: <IoSettingsOutline />,
  },
  {
    key: "/divider",
    label: "divider",
    style: { margin: 0, border: 0, flexGrow: 1, visibility: "hidden" },
  },
  {
    key: "/logout",
    label: "Log Out",
    icon: <LoginOutlined />,
  },
];

型
路线代码：

import { createBrowserRouter } from "react-router-dom";

import SignIn from "../pages/Signin/Signin";
import Email from "../pages/ForgetPassword/Email/Email";
import Otp from "../pages/ForgetPassword/Otp/Otp";
import UpdatePassword from "../pages/ForgetPassword/updatePassword/UpdatePassword";
import Dashboardlayout from "../Layout/DashboardLayout";
import Dashboard from "../pages/Dashboard/Dashboard";
import Students from "../pages/Dashboard/Students/Students";

import Courses from "../pages/Dashboard/Courses/Courses";
import Addcourse from "../pages/Dashboard/Courses/Addcourse/Addcourse";
import EditCourse from "../pages/Dashboard/Courses/EditCourse/EditCourse";
import Mentors from "../pages/Dashboard/Mentors/Mentors";
import Department from "../pages/Dashboard/Department/Department";
import EditDepartment from "../pages/Dashboard/Department/EditDepartment/EditDepartment";
import Attendence from "../pages/Dashboard/Attendence/Attendence";
import Events from "../pages/Dashboard/Events/Events";
import ClassSchedule from "../pages/Dashboard/Class-Schedule/Class-Schedule";
import StudentProfile from "../pages/Dashboard/Students/EditStudent/StudentProfile";
import Profile from "../pages/Dashboard/Profile/Profile";
import MentorsDashboard from "../pages/Dashboard/Mentors/MentorsDashboard/MentorsDashboard";
import Wallet from "../pages/Dashboard/Wallet/Wallet";
import Setting from "../pages/Dashboard/Setting/Setting";
import LoginActivity from "../component/LoginActivity/LoginActivity";
import Notification from "../component/Notification/Notification";
import StudentDashbord from "../pages/Dashboard/StudentDashboard/StudentDashbord";
import StudentEnrolledCourse from "../pages/Dashboard/StudentDashboard/StudentEnrolledCourse/StudentEnrolledCourse";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <Dashboardlayout></Dashboardlayout>,
    children: [
      {
        path: "/",
        element: <Dashboard></Dashboard>,
      },
      {
        path: "/dashboard",
        element: <Dashboard></Dashboard>,
      },
      {
        path: "/students",
        element: <Students></Students>,
      },
      {
        path: "/profile/:id",
        element: <Profile />,
      },
      {
        path: "/students/profile/:id",
        element: <StudentProfile></StudentProfile>,
      },
      {
        path: "/student/dashboard",
        element: <StudentDashbord />,
      },
      {
        path: "/courses",
        element: <Courses></Courses>,
      },
      {
        path: "/courses/add",
        element: <Addcourse></Addcourse>,
      },
      {
        path: "/courses/edit/:id",
        element: <EditCourse></EditCourse>,
      },
      {
        path: "/mentors",
        element: <Mentors />,
      },
      {
        path: "/MentorsDashboard",
        element: <MentorsDashboard />,
      },
      {
        path: "/departments",
        element: <Department />,
      },
      {
        path: "/departments",
        element: <Department />,
      },
      {
        path: "/department/edit/:id",
        element: <EditDepartment />,
      },
      {
        path: "/attendence",
        element: <Attendence />,
      },
      {
        path: "/events",
        element: <Events />,
      },
      {
        path: "/class-schedule",
        element: <ClassSchedule />,
      },
      {
        path: "/wallet",
        element: <Wallet />,
      },
      {
        path: "/setting",
        element: <Setting />,
      },
      {
        path: "/setting/login-activity",
        element: <LoginActivity />,
      },
      {
        path: "/notification",
        element: <Notification />,
      },
      {
        path: "/student/dashboard/course/:id/:moduleName/:videoId",
        element: <StudentEnrolledCourse />,
      },
    ],
  },
  {
    path: "/signin",
    element: <SignIn></SignIn>,
  },
  {
    path: "/forgetpassword/email",
    element: <Email></Email>,
  },
  {
    path: "/forgetpassword/otp",
    element: <Otp></Otp>,
  },
  {
    path: "/forgetpassword/update",
    element: <UpdatePassword></UpdatePassword>,
  },
]);

型
x1c 0d1x的数据

reactjs

1条答案

按热度按时间
pieyvz9o

pieyvz9o1#

如何知道用户是“admin”、“mentor”还是“student”？如果可以将该值存储在变量或localStorage中，则可以使用AntDesign的边菜单route对象中的“authority”字段。

...
{
key: "/students",
label: "Students",
icon: <GoPeople />,
authority: 'student'
},
...

字符串
这样
那么你可以这样过滤sidebarItems：

<Menu
{...otherStuff}
items={sidebarItems.filter(item => item.authority === 'student')}
/>

型
如果您有其他问题，请发表评论

赞(0）分享  回复(0）举报  5个月前
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com