Create a login page avoiding the other pages-CodePudding

I'm quite new on angular and I was creating a login page, my problem is I'd like to create a login page without show any other components besind and once I got the response 200 redirect to the other component:

my app.component.html is:

 <nav>
  <p-tabView (onChange)="onClick($event)">
    <p-tabPanel header="Random " routerLink="/random" >
    </p-tabPanel>
    <p-tabPanel header="Manifacture" routerLink="/Manifacture">
    </p-tabPanel>
    <p-tabPanel header="Add" routerLink="/add">
    </p-tabPanel>
    <router-outlet></router-outlet>
  </p-tabView>
</nav>

my app.router:

    { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'random', component: RandomPComponent },
  { path: 'Manufacuter', component: ManufactureComponent }
....

What can I see on my angular is: Main page

I know the problem is my main page with the tab-view componet but I want are invisible until is logged in, and I'd like to know if is correct to add the tab-view in the app.component or shoud I create another component (and an other router) to show as I want

Thanks to all, I really appreciate

CodePudding user response：

In my Opinion the best way is to use the ngIf directive and display your tabView when you user is log using a boolean value.

Concerning you app-component, i think that is better to have another component like a layout and only let your router outlet on app-comp