使用 JS 從導航中隱藏菜單項

Question

如果用戶角色是User並且向Admin顯示所有菜單，我想從導航中隱藏一些菜單。 我想對用戶隱藏用戶SSO 映射和日志。

我正在使用OpenID Connect flask進行身份驗證。

任何人都可以幫助我嗎？

 <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li>
                <a href="dash.html">Home</a>
            </li>
            <li>
                <a href="#">Profile</a>
            </li>
            <li>
                <a href="#">Change Password</a>
            </li>
            <li>
                <a class="dropdown-btn">User
                    <i class="fa fa-caret-down"></i>
                  </a>
                  <div class="dropdown-container">
                    <a href="#">View Users</a>
                    <a href="#">Add User</a>
                    <a href="#">Manage Role</a>
                  </div>
            </li>
            <li>
                <a href="#">Log</a>
            </li>
            <li>
                <a href="#">SSO Mapping</a>
            </li>
            <li>
                <a href="#">Login History</a>
            </li>
            <li>
                <a href="#">Support Guide</a>
            </li>
        </ul>
    </div>

Answer 1

建議您使用服務器端模板引擎來執行此操作。 （或者可能是像 React 和 Vue 這樣的 UI 框架）。

但是由於您在這里使用的是 HTML，

使用服務器端模板引擎。

您可以存儲確定用戶角色的 cookie。 如果將 Node.js 與 Express 一起使用，

req.session.role = "User"; // this will be based on the login

現在你可以簡單地使用像 EJS 這樣好的模板引擎來渲染它。

app.get('/', function(req, res, next) {
  res.render('index.ejs', {
    role: req.session.role
  })
})

在你的 index.ejs 中，

<% if(role == "Admin") { %>
  <li>
    <a class="dropdown-btn">User
      <i class="fa fa-caret-down"></i>
    </a>
    <div class="dropdown-container">
      <a href="#">View Users</a>
      <a href="#">Add User</a>
      <a href="#">Manage Role</a>
    </div>
  </li>
<% } %>

注意：由於您尚未指定登錄和角色確定的工作方式，因此這是迄今為止唯一安全的方法