Not able to load contents router-outlet-CodePudding

I am trying to change the router outlet based on the authentication. My code is like below

<div *ngIf="isLoggedIn"  [ngClass]="{'layout-loading': !initialized}">
  <div >
    <app-layout-sidenav></app-layout-sidenav>

    <div >
      <app-layout-navbar></app-layout-navbar>

      <div >
        <div >
          <router-outlet></router-outlet>
        </div>

        <app-layout-footer></app-layout-footer>
      </div>
    </div>
  </div>
</div>
<div  (click)="closeSidenav()"></div>

<ng-container *ngIf="!isLoggedIn">
  <router-outlet></router-outlet>
</ng-container>

Here, the login screen is working fine but after login, I am not able to load the contents from authenticated routes. But If I fully refresh the page and it's working.

Also, I have tried with outlet name but it was also not working

Could anyone resolve this problem?

Thanks in advance

CodePudding user response：

I think the below code is the problem, kindly change it to

Before:

<ng-container *ngIf="!isLoggedIn">
  <router-outlet></router-outlet>
</ng-container>

After:

  <router-outlet></router-outlet>

If you want to implement authorization go for canActivate in routing, this is the standard way to do it!