Currently, I am developing a CRUD application with an authentication component where I'm using JWT roles to manage the navigation between pages. This implementation ensures that once a user logs into the application, they will only see menu links relevant to their assigned role.

AuthenticationService.ts

import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {JwtHelper} from 'angular2-jwt';

@Injectable()
export class AuthenticationService {

  private host:string="http://localhost:8080";
  private jwtToken:string=null;
  private roles:Array<any>=[];
  private tk:any;

  constructor(private http:HttpClient){

  }
  login(user){
    return this.http.post(this.host+"/login",user, {observe:'response'});
  }

  logout(){
    this.jwtToken=null;
    localStorage.removeItem('token');
  }

  saveToken(jwt:string){
    this.jwtToken=jwt;
    localStorage.setItem('token',jwt);
    let jwtHelper=new JwtHelper();
    this.roles=jwtHelper.decodeToken(this.jwtToken).roles;
  }

  loadToken(){
    return this.jwtToken=localStorage.getItem('token');
  }

  isAdmin(){
    for(let r of this.roles) {
      console.log("********************************"+r);
      if(r.authority=='ADMIN') return true;
    }
    return false;
  }
  isDeveloper(){
    for(let r of this.roles) {
      console.log("********************************"+r);
      if(r.authority=='DEVELOPER') return true;
    }
    return false;
  }
  isCommercial(){
    for(let r of this.roles) {
      console.log("********************************"+r);
      if(r.authority=='COMMERCIAL') return true;
    }
    return false;
  }

  isOnline(){
    this.jwtToken=localStorage.getItem('token');
    if (this.jwtToken != null) return true;
    return false;
  }
  isOffline(){
    this.jwtToken=localStorage.getItem('token');
    if (this.jwtToken == null) return true;
    return false;
  }

}

app.component.html

 <!-- partial -->
  <div [ngClass]="{'container-fluid page-body-wrapper':authenticationService.isOnline()}">
    <!-- partial:partials/_sidebar.html -->
    <nav *ngIf="authenticationService.isOnline()" class="sidebar sidebar-offcanvas" id="sidebar">
      <ul class="nav">
        <li class="nav-item nav-profile">
          <a href="#" class="nav-link">
            <div class="nav-profile-image">
              <img src="assets/images/faces/face1.jpg" alt="profile">
              <span class="login-status online"></span> <!--change to offline or busy as needed-->
            </div>
            <div class="nav-profile-text d-flex flex-column">
              <span class="font-weight-bold mb-2">David Grey. H</span>
              <span class="text-secondary text-small">Project Manager</span>
            </div>
            <i class="mdi mdi-bookmark-check text-success nav-profile-badge"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/tasks">
            <span class="menu-title">Dashboard</span>
            <i class="mdi mdi-home menu-icon"></i>
          </a>
        </li>
        <li *ngIf="authenticationService.isAdmin()" class="nav-item">
          <div class="dropdown">
            <a class="nav-link" data-toggle="collapse" (click)="OnClik3()" data-target="#myNavbar3">
              <span class="menu-title">Admin Area</span>
              <i class="menu-arrow"></i>
              <i class="mdi mdi-worker"></i>
            </a>
            <div class="collapse navbar-collapse" [ngClass]="{'show': buttontoggled3}" id="myNavbar3">
              <ul class="nav flex-column sub-menu">
                <li class="nav-item">
                  <a class="nav-link" data-toggle="dropdown" routerLink="/roles">Roles</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-toggle="dropdown" routerLink="/users">Users</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-toggle="dropdown" href="#">XXX API</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li *ngIf="authenticationService.isAdmin() || authenticationService.isCommercial()" class="nav-item">
        <div class="dropdown">
          <a class="nav-link" data-toggle="collapse" (click)="OnClik1()" data-target="#myNavbar1">
            <span class="menu-title">Network</span>
            <i class="menu-arrow"></i>
            <i class="mdi mdi-google-circles-extended"></i>
          </a>
          <div class="collapse navbar-collapse " [ngClass]="{'show': buttontoggled1}" id="myNavbar1">
            <ul class="nav flex-column sub-menu">
              <li class="nav-item">
                <a class="nav-link" data-toggle="dropdown" routerLink="/companies">Companies</a>
              </li>
              <li class="nav-item">
              <a class="nav-link" data-toggle="dropdown" routerLink="/contacts">Contacts</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="dropdown" href="#">Whatsapp API</a>
              </li>
            </ul>
          </div>
        </div>
        </li>

An issue arises when the user stays logged in but navigates away from the page and returns; the menu items linked to specific user roles disappear. How can I resolve this problem? Your suggestions are highly appreciated.