app.component.html Authentication JWT Angular 9 Lumen 7

app.component.html

<div id="app">
  <nav class="navbar navbar-expand navbar-dark bg-dark">
    <div class="container">
      <a href="#" class="navbar-brand">
        <img
          width="32"
          alt="Angular Logo"
          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
        />
        Angular 9 LOGIN JWT
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto" routerLinkActive="active">
          <li class="nav-item">
            <a href="/home" class="nav-link" routerLink="home">Home </a>
          </li>
        </ul>

        <ul class="navbar-nav ml-auto" *ngIf="!isLoggedIn">
          <li class="nav-item">
            <a href="/register" class="nav-link" routerLink="register">Register</a>
          </li>
          <li class="nav-item">
            <a href="/login" class="nav-link" routerLink="login">Login</a>
          </li>
        </ul>

        <ul class="navbar-nav ml-auto" *ngIf="isLoggedIn">
          <li class="nav-item">
            <a href="/profile" class="nav-link" routerLink="profile">{{ username }}</a>
          </li>
          <li class="nav-item">
            <a href class="nav-link" (click)="logout()">LogOut</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container">
    <router-outlet></router-outlet>
  </div>
</div>