如何基于sessionStorage显示菜单项
How to display menu items based on 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 函数?
任何指导将不胜感激。
您想要的是根据数据动态呈现列表。从会话存储接收数据不是问题,因为它可以通过
完成
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);
所以这里的想法是根据需要构建路由,然后将其传递给渲染函数
我有点不知所措,这是最好的方法。从 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 函数?
任何指导将不胜感激。
您想要的是根据数据动态呈现列表。从会话存储接收数据不是问题,因为它可以通过
完成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);
所以这里的想法是根据需要构建路由,然后将其传递给渲染函数