如何在 Reactjs 中判断受保护路由上的用户角色

我有一个受保护的路由，当用户登录时，我将用户详细信息保存在本地存储上.在受保护的路径中，我判断本地存储中的用户详细信息，如果为空，则重定向到登录页面，否则，用户可以访问所有选项卡，并且我有三个角色.我希望用户应该能够访问基于选项卡的角色.如果角色为仅限用户访问，则Dashboard和Admin应能够访问所有页面.如何判断用户角色，并根据角色授予访问权限？

这是我需要的Auth.js和代码.

import React from "react";
import { Navigate } from "react-router-dom";
export const RequireAuth = ({ children }) => {
  const user = localStorage.getItem("userInfo");
  if (!user) return <Navigate to="/login" />;
  return children;
};

这是我的布局文件

import React from "react";
import { Outlet } from "react-router-dom";
import Sidebar from "../../components/Sidebar";
import Headers from "../../components/Header";
import { RequireAuth } from "../../shared/requireAuth";


const Layout = () => {
  return (
    <>
      <RequireAuth>
        <div className="container-fluid">
          <div className="row">
            <Sidebar />
            <div className="col-md-9 ms-sm-auto col-lg-10 px-0  ">
              <Headers />
              <div className="px-lg-5 px-3 py-3">
                <Outlet />
              </div>
            </div>
          </div>
        </div>
        
      </RequireAuth>
    </>
  );
};

export default Layout;

这是我在App.js上的路由

<Route path="/" element={<Layout />}>
  <Route path="/users" element={<UserList />} />
  <Route path="/adduser" element={<AddUser />} />
  <Route path="/dashboard" element={<Dashboard />} />
</Route>;

如果用户没有访问该页面的权限，则重定向此路由.

   <Route path="/unauthorized" element={<Unauthorized />} />