如何根据用户呈现侧边栏

Question

我有 5 种类型的用户，所有用户都可以访问侧边栏，具体取决于他们是哪些用户。我在屏幕截图中与您分享了用户详细信息。你可以查看 walletClasList，还有 issuerAccess、userAccess、macAccess、nodeAccess。

如果您有任何疑问或疑问，可以通过我的 stack overflow 帐户或 insta dhansukh_katariya

import { Link } from 'react-router-dom';
import { webwalletnavbar } from '../Constatnts/Sidebaritems';
import { useEffect, useState } from 'react';
import http from '../api/httpService';

function Sidebar() {
  let pathname = window.location.pathname;
  const [menu, setMenu] = useState([]);
  // const [userSidebar, setUserSidebar] = useState();
  
  useEffect(() => {
    async function fetchData() {
      let response = await http.get('api/security/GetNavigation');
      setMenu(response.data);
    }
    fetchData();
  }, []);
  let dynamicClassId = '';
  console.log(menu);

  return (
    <>
      {/* <div className="container-fluid p-0"> */}
      {/* <div className="row m-0"> */}
      {/* <div className="col-md-3 col-lg-3 col-xxl-2 p-0"> */}
      <div className='sidebar'>
        {menu &&
          menu.map((menu, index) => {
            // let id=menu.itemLevel===1&&menu.keycode;
            if (menu.itemLevel === 1) {
              dynamicClassId =
                menu.displayname.replace(/ /g, '') + menu.navbarID;
            }
            return (
              <div className='accordion sidebar-main' key={index} id='sd'>
                <div
                  // className="issuers"
                  className={
                    menu.walletClassList === 'NODE,MA,ISSUER,USER'
                      ? 'issuers d-block'
                      : 'issuers d-none'
                  }
                >
                  {menu.itemLevel === 1 && (
                    <h2
                      // className="accordion-header active"
                      className={
                        webwalletnavbar.includes(pathname)
                          ? 'accordion-header active'
                          : 'accordion-header'
                      }
                      // {
                      // Issuer.includes(pathname)
                      // ? "accordion-header active"
                      // : "accordion-header"
                      // }
                      id={menu.keycode}
                    >
                      <button
                        className='accordion-button'
                        type='button'
                        data-bs-toggle='collapse'
                        data-bs-target={'#' + dynamicClassId}
                      >
                        <div className='sidebar-main-label d-flex align-items-center '>
                          {webwalletnavbar.includes(pathname) ? (
                            <img
                              src='../icons/Issuers-icon-active.png'
                              className='issuers-icon-img show'
                              alt='Issuers-icon-img'
                            ></img>
                          ) : (
                            <img
                              src='../icons/Issuers-icon.png'
                              className='issuers-icon-img none'
                              alt='issuers-icon-img'
                            ></img>
                          )}
                          <h3>{menu.displayname}</h3>
                        </div>
                      </button>
                    </h2>
                  )}
                  {menu.itemLevel === 2 && (
                    <div
                      id={dynamicClassId}
                      // className={
                      //   menu.walletClassList === "NODE,MA,0,0" &&
                      //   menu.itemLevel === 2
                      //     ? "accordion-collapse collapse show d-block"
                      //     : "accordion-collapse collapse show d-none"
                      // }
                      className={
                        webwalletnavbar.includes(pathname)
                          ? 'accordion-collapse collapse '
                          : 'accordion-collapse collapse show'
                      }
                      aria-labelledby='issuers'
                      data-bs-parent='#sd'
                    >
                      <ul>
                        <li>
                          <Link
                            to={{
                              pathname: '/webwallet/model2',
                              // query: { backUrl: "/webwallet/createissuer" },
                              search: `?backUrl=${menu.webURL}`,
                            }}
                            className={
                              pathname === menu.webURL ? ' active' : ''
                            }
                          >
                            {menu.displayname}
                          </Link>
                        </li>
                      </ul>
                    </div>
                  )}
                </div>
              </div>
            );
          })}
      </div>
      {/* </div> */}
      {/* </div> */}
      {/* </div> */}
    </>
  );
}

export default Sidebar;

this is a image of data base, as you can see user data.

enter image description here

Answer 1

您应该将所有菜单分成不同的部分。然后有条件地渲染它们。

喜欢为整个侧边栏创建一个组件 <SideBar></SideBar> 然后为每个菜单创建组件 <wallet></wallet> <issuer></issuer> 等

然后如果用户 has_access 钱包以类似的方式呈现给其他人。

代码应如下所示：

<SideBar>
  {
     user.type === "walletClasList" ?
     </wallet>
     : user.type === "issuer" ? </issuer> : <so-on>
  }
</SideBar>

现在您只需在需要的地方调用Sidebar

如何根据用户呈现侧边栏

How can I render sidebar depend on user

javascript

node.js

reactjs