简体   繁体   中英

What are the ways to show different navbar based on if the user logged or not?

I want to know what are the best ways to show different navbar based on the fact that the user is logged or not.

I think about several ways to do it:

  1. One way could be making two navbars in the HTML file and use CSS to make one display block and the other display none and switch between them using js.

  2. Or another way could be using PHP "if statement"...

What other ways are there? and I know there is a lot of ways but what's the easiest way, and also with clean code.

Thank you all :).

If I understand your question properly. I would completely discourage your from using javascript/css based Hide/Show, One very good reason for it would be security, if anyone goes through your code can easily unhide your Navbar.

This is the case if you want to only show the Navbar if the user is logged in.

If you're writing PHP, mentioned in the comments by Lawrence, follow the MVC pattern and create your navbar as a View and include it ONLY when user is logged in. PHP is a server-side language and it will not render anything if the logged-in condition is not full-filled.

Another advantage on using server-side rendering using PHP is that you can have multiple Navbars for different type of users. (Not the best practice , but you can do that).

Alternatively, if you wish to expand your knowledge in this field , you can achieve a far better result using front-end frameworks such as ReactJS or Angular etc...

I definitely recommend you about not using js or any other client side languages!

What I'm gonna recommend : I don't know if it's counted as clean but ...

I wrote a web application and the navigation bar was depended on the user's access level,

so after the login, depend on user's access level, the path of the header file I included would be different.

<?php
    include(the path of the intended header/header.php);
?>

I got the intended path from database.

if your program isn't so sensitive about user access levels or you don't have a very dynamic navbar I think this is a good way!

otherwise wait for a pro to answer ;)

I will prefer applying a classname to <body> by php and show/hide related elements by css, it can also control other elements on the page not only nav .

Edit: Security is not a problem here because you should restrict accessing by php instead of just hide the links. The method here is just handling the layout.

 nav ul li { display: none; } body.guest nav ul li.guest, body.logged nav ul li.logged { display: block; }
 <?php $user_logged = ($user->guest) ? 'guest' : 'logged'; ?> <body class="<?php echo $user_logged; ?>"> <nav> <ul> <li class="guest"><a href="#">Nav 1</a></li> <li class="guest"><a href="#">Nav 2</a></li> <li class="logged"><a href="#">Nav 3</a></li> <li class="guest"><a href="#">Nav 4</a></li> <li class="logged"><a href="#">Nav 5</a></li> <li class="logged"><a href="#">Nav 6</a></li> <li class="guest"><a href="#">Nav 7</a></li> <li class="logged"><a href="#">Nav 8</a></li> <li class="logged"><a href="#">Nav 9</a></li> <li class="guest"><a href="#">Nav 10</a></li> </ul> </nav> </body>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM