时间戳

首页 > 解决方案 > 如何基于 sessionStorage 显示菜单项

javascript - 如何基于 sessionStorage 显示菜单项

问题描述

我有点迷失在哪个是最好的方法。从 API 获取用户数据后，我将用户数据存储在 sessionStorage 中。如何根据角色（即管理员、代表、访客）显示菜单项。

我有一个基本的 Bootstrap 侧边栏，如下所示。

<ul class="sidebar-nav">
 <li><a>Home</a>
   <ul class="sidebar-dropdown">
     <li>Default</li>
     <li>Reports</li>
   </ul>
 </li>
 <li><a>Contact</a>
    <ul class="sidebar-dropdown">
      <li>Admin Contact</li>
      <li>Contact 1</li>
    </ul>
 </li>
</ul>

我应该根据我的菜单项的角色以及在加载显示或隐藏菜单项时运行的 JavaScript 函数向菜单项添加类吗？

任何指导将不胜感激。

JSFIDDLE

标签： javascriptbootstrap-4user-permissionsuser-rolessession-storage

解决方案

您想要的是根据数据动态呈现列表。从会话存储接收数据不是问题，因为它可以通过

JSON.parse(sessionStorage.getItem('data'));

你的问题是渲染它们。首先尝试使用硬编码数据，看看您是否能够呈现您想要的内容，然后只需插入存储中的数据。例如 https://codesandbox.io/s/elated-fast-my3ud?file=/src/index.js

const routes = [
  {
    href: "/home",
    title: "Home",
    children: [
      {
        href: "/home/defaults",
        title: "Defaults"
      },
      {
        href: "/home/reports",
        title: "Reports"
      }
    ]
  },
  {
    href: "/contact",
    title: "Contact",
    children: [
      {
        href: "/contact/admin-contact",
        title: "Admin Contanct"
      },
      {
        href: "/contact/contact-1",
        title: "Contact 1"
      }
    ]
  }
];

function renderSingleRoute(route) {
  const children = route.children ? renderRoutes(route.children) : "";
  return `
    <li>
      <a href="${route.href}">${route.title}</a>
      ${children}
    </li>
  `;
}

function renderRoutes(routes) {
  return `
    <ul>
      ${routes.map((route) => renderRoute(route)).join("")}
    </ul>
  `;
}

document.getElementById("app").innerHTML = renderRoutes(routes);

所以这里的想法是建立你想要的路线，然后将它传递给渲染函数

推荐阅读