Best practice change navigation on login

Questions Components & MVC
,
1

Hello world,
When a user logs in i want to change the navigation bar in the layout. Login has to disappear and the menu for the loged in user has to appear.

What is best parctice to do that (because there are a few ways to solve this)

2

Via laminas-permissions-acl:

Some more help:

1 Like
3

Thanks! I now simply do it like this

  $default = $this->navigation()->findOneByLabel('default');
                    $options = [
                        'ulClass' => 'navbar-nav'
                    ];
                
                    if ($this->identity()!=null){
                        echo $this->navigation('Laminas\Navigation\ingelogd')->menu();
                    }
                    else {
                        echo $this->navigation('Laminas\Navigation\default')->menu()->renderMenu($default,$options);
                    }
4

I was struggling with applying the correct (bootstrap) classes to al of the items and suddenly I wondered why to make it this difficult. What is wrong with brining some small logic in the view regarding the login part? For the use of breadcrumbs/sitemap it could be advisable to do the “static” navigation items with Laminas-navigation, but login would not be part of it.
What is your opinion?

       <div class="collapse navbar-collapse" aria-expanded="true" id="navbar-toggle">
                          <ul class="navbar-nav"> 
               		<li class="nav-item">
               		         	<a class="nav-link" href="/technisch-personeel-industrie">Technisch personeel</a>
               		</li>
               		<li class="nav-item">
               			<a class="nav-link" href="/bedrijven">Opdrachtgevers/projecten</a>
               		</li>
               		<li class="nav-item">
               			<a class="nav-link" href="/over-maintenanceplus">Over ons</a>
               		</li>
               		<li class="nav-item">
               			<a class="nav-link" href="/contact">Contact</a>
               		</li>
                 		<?php 
               		   if ($this->identity()!=null){
               		       echo '
               		           <li class="nav-item dropdown ">
               		               <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
               		               <div class="dropdown-menu" aria-labelledby="navbarDropdown">
               		                   <a class="dropdown-item nav-link" href="/profiel">Profiel</a>
               		                   <a class="dropdown-item nav-link" href="/logout">Uitloggen</a>
               		               </div>
               		           </li>';
               	        }
               	        else {
                            echo '
                                <li class="nav-item" id="menu-inloggen">
               			              <a class="nav-link" href="/login">Inloggen</a>
               		            </li>
                            ';                      	            
               	        }
               		   ?>
               </ul>
        </div>
5

The best practice is to manage the navigation bar dynamically based on the user’s authentication state. Typically, you would use a global state management solution (like Context API, Redux, or even simple React state if it’s a small app) to track whether the user is logged in. When the login event happens, you update the authentication state, and the navigation bar automatically re-renders to show the appropriate menu items. This way, you avoid manually manipulating the DOM, and everything stays declarative and easy to maintain. It’s also a good idea to persist the login state (using cookies, localStorage, or server sessions) so the navigation updates correctly even after a page refresh.

1 Like