创建一个登录页面，避开其他页面

Question

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:

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

Answer 1

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

Answer 2

I suggest you use route guards to redirect to login page

export class IsLoggedGuard implements CanActivate {
  constructor(private loginService: LoginService, 
          private router: Router, 
          private activatedRouter: ActivatedRoute) { }

  canActivate(activatedRouteSnapshot:ActivatedRouteSnapshot,
         routerStateSnapshot: RouterStateSnapshot): Observable<boolean> {
     return this.loginService.isLogged().pipe(
       map((res: any) => {
         ...
         return res.success;
       }),
       tap(res => {
         if (!res)
         {
           this.router.navigate(['/login'], 
             { queryParams: { returnUrl: routerStateSnapshot.url } });
         }
       }))
    } 
}

Then you can to have a app.component

<router-outlet></router-outlet>

And a main.component like your "old app.component"

<nav>
  <p-tabView (onChange)="onClick($event)">
    ....
    <router-outlet></router-outlet>
  </p-tabView>
</nav>

So, you can use a router like

  { path: 'login', component: LoginComponent },
  { path: '', component:MainComponent, canActivate: [IsLoggedGuard ] 
      children:[
         { path: 'register', component: RegisterComponent },
         { path: 'random', component: RandomPComponent },
         { path: 'Manufacuter', component: ManufactureComponent }
      ]
  }