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

Question

I am trying to make a web app that lets users share information, but my partner wants a specific type of logic. If the user is logged in, he or she will get more content than if he or she wasn't. To be specific, I want the person who ISN'T logged in to be able to see projects, grids, tiles, and sources. Then, I want the person who IS logged in to be able to not only see everything above, but gain options like creating, editing and deleting projects, as well as give the user the opportunity to brainstorm ideas via a link.

<!-- 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>

That is the HTML, and here is the 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";
    }

I would appreciate any help I can get.

Answer 1

As others have stated, it's best not to include "authenticated" DOM elements to unauthenticated users. That said, a nice pattern is to set an "authenticated" class on the html element (if the server determines that the user is authenticated). Then use descendent css to your heart's desire. Right now you're using javascript for formatting that is best handled by css.

Answer 2

You can create a session variable ( in PHP for example : https://www.php.net/manual/en/book.session.php ) and display build your content accordingly. I speak about PHP because security ( and so authentification ) is a server-side job.

Answer 3

You need to AJAX the "actions" HTML from the server. This is a two part deal.

Client side:

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

Server Side: (assuming you are using 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>'
?>

Something like that...