Javascript 如何限制用户访问并显示特定菜单部分？

我有一个组件，通过地图显示所有菜单部分。如果菜单该部分的用户权限等于0，我如何限制访问（使其隐藏）

  const Aside: React.FunctionComponent = () => {
  const[hasRight, setHasRight] = useState(false);

  useEffect( () => {
    getUserContext()
      .then((response) => {
        Object.keys(response.data.acl.rights).forEach(role => {
          const right = response.data.acl.rights[role];
          Object.keys(right).forEach(val => {
            right[val] > 0 ?
            setHasRight(true) :
            setHasRight(false);
          });
        });
        return response.data.acl;
      })
  }, [hasRight]);
  return (
    <div className="Aside">
      {hasRight?
        pages.map((page, index) => {
          return (
            <Link className="Aside__link" key={index} to={page.link}>
              <img className="Aside__link-image" src={page.img} alt="page__img" />
              <p>{page.title}</p>
            </Link>
          );
      }): null}
    </div>
  );
};

const-Aside:React.FunctionComponent=（）=>{
const[hasRight，setHasRight]=useState（false）；
useffect（（）=>{
getUserContext（）
。然后（（响应）=>{
Object.keys（response.data.acl.rights）.forEach（角色=>{
const right=response.data.acl.rights[role]；
Object.keys（右）.forEach（val=>{
对[val]>0？
setHasRight（true）：
setHasRight（假）；
});
});
返回response.data.acl；
})
}，[hasRight]）；
返回(
{是吗？
pages.map（（页面，索引）=>{
返回(
{page.title}

);
})：null}
);
};

---

在本部分中，如果菜单没有访问权限，我将隐藏所有菜单。我需要检查每个菜单项以查看是否有访问权限。

每个用户对许多不同的页面拥有许多不同的权限，因此，您需要存储一个键控对象，显示他们是否对每个页面拥有权限，而不是将

hasRight

创建为

布尔状态。我假设，如果用户有多个角色，如果他们的任何角色都有权限，他们就会有权限

type UserRights = Record<string, boolean>;

const [userRights, setUserRights] = useState<UserRights>({});

useEffect的依赖项应该是用户id或类似的内容，否则使用空数组
[]
运行一次

您的菜单和权限之间的链接在哪里？您能解释一下为什么我们要将[name]：existing[name]| | number>0？关于我理解的数字，特别是，在这一部分发生了什么：Object.entries（roleRights）.forEach（[name，number]）=>{setUserRights（existing=>（{……existing，[name]：existing[name]| | number>0}））为什么我们使用| |？| |的意思是“或”因此，如果数字大于0，或者已经设置为true，我们要将权限设置为true。基本上，如果他们有多个角色，我们不希望删除前一个角色已经授予的权限。
const canView = (page: PageConfig): boolean => {
  return userRights[page.acl];
}

<div className="Aside">
  {pages.filter(canView).map((page, index) => {

useEffect(() => {
  getUserContext()
    .then((response: Response) => {
      Object.values(response.data.acl.rights).forEach(roleRights => {
        Object.entries(roleRights).forEach(([name, number]) => {
          setUserRights(existing => ({
            ...existing,
            [name]: existing[name] || number > 0 // true if true true for any role
          }))
        });
      });
    })
}, []);