Javascript 如何根据用户是否登录显示内容

我正在尝试制作一个允许用户共享信息的web应用程序，但我的合作伙伴想要一种特定类型的逻辑。如果用户登录，他或她将获得比未登录时更多的内容。具体来说，我希望未登录的人能够查看项目、网格、平铺和源。然后，我希望登录的用户不仅能够看到上面的所有内容，还可以获得创建、编辑和删除项目等选项，并通过链接让用户有机会集思广益

<!-- Tab Links -->
      <div class="tab">
        <button class="tablinks" onclick="openTab(event, 'Dashboard')">Dashboard</button>
        <button class="tablinks" onclick="openTab(event, 'Projects')">Projects</button>
        <button class="tablinks" onclick="openTab(event, 'Grids')">Grids</button>
      </div>

      <!-- Tab Contents -->
      <div id="Dashboard" class="tabcontent">
        <h3>Dashboard</h3>
        <p>Projects, Grids, Tiles, and Sources go here.</p>
      </div>

      <div id="Projects" class="tabcontent">
        <h3>Projects</h3>
        <p>Project titles, grids, tiles, and sources go here.</p>
      </div>

      <div id="Grids" class="tabcontent">
        <h3>Grids</h3>
        <p>Grid titles, tabs, tiles, and sources go here.</p>
      </div>

仪表板
项目
网格
仪表板
项目、网格、瓷砖和源都在这里

项目
项目标题、网格、平铺和来源都在这里

网格
网格标题、选项卡、平铺和源都在这里

这是HTML，下面是Javascript：

//When you click a dashboard tabs
    openTab: async function(evt, tabName) {
      // Declare all variables
      var i, tabcontent, tablinks;

      // Get all elements with class="tabcontent" and hide them
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }

      // Get all elements with class="tablinks" and remove the class "active"
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace("active", "");
      }

      // Show the current tab, and add an "active" class to the button that opened the tab
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
    }

//单击仪表板选项卡时
openTab：异步函数（evt，tabName）{
//声明所有变量
var i，tabcontent，tablinks；
//使用class=“tabcontent”获取所有元素并隐藏它们
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

---

如果能得到任何帮助，我将不胜感激。

正如其他人所说，最好不要向未经身份验证的用户提供“已验证”的DOM元素。这就是说，一个好的模式是在html元素上设置一个“authenticated”类（如果服务器确定用户已通过身份验证）。然后根据你的心愿使用后代css。现在，您正在使用javascript进行格式化，这是css处理的最佳方式

您可以创建一个会话变量（在PHP中，例如：）并相应地显示构建内容。我之所以谈论PHP，是因为安全性（以及身份验证）是一项服务器端工作。

您需要从服务器上用AJAX处理“操作”HTML。这是一个由两部分组成的交易

客户端：

// execute this on load
$.ajax({
     type: "GET",
     url: '/getactions',
     success: function(data) {
           // data is ur summary
          $('#buttons_div').html(data);
     }
});

服务器端：（假设您使用的是php，getactions.php）

---

类似这样的操作…

这是一个最好在服务器上执行的操作。您需要一些后端/服务器逻辑来实现此操作，除非您有其他方法来检测用户是否登录。顺便说一句，在html上创建一个id为“buttons\u div”的div以接收内容。

<?php
if( !isset($_SESSION['user_is_logged']) || (time() - $_SESSION['last_access']) > 60 )
  $_SESSION['last_access'] = time();
  echo '<button>Create New Project</button>'
?>