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

Question

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

<!-- 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";
    }

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

Answer 1

您需要从服务器对“操作”HTML 进行 AJAX 处理。这是一个两部分的交易。

客户端:

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

服务器端:(假设您使用的是 php，getactions.php)

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

类似的东西......