How to show login Component when app loads first instead of appComponent in Angular 5

Question

I am totally new to Angular 5 ,I want to show the login page when the app is open .

Now I am showing appComponent and it has toolbar and side navigation bar.But when the user load the app I want to show a login screen if login is successful then only the user should allow to see the Home page.

If I make my appcompoent as login component ,I could not load different components in home page based on menu selection by the user.

app.component.html

<mat-sidenav-container fullscreen>
    <mat-sidenav #sidenav class="app-sidenav">
        <mat-nav-list>
            <a mat-list-item routerLink="/home" routerLinkActive="active-list-item">
                <h2 matLine>Home</h2>
                <mat-icon matListIcon>home</mat-icon>
            </a>
            <a mat-list-item routerLink="/account" routerLinkActive="active-list-item">
                <h2 matLine>Account</h2>
                <mat-icon matListIcon>person</mat-icon>
            </a>
            <a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">
                <h2 matLine>Settings</h2>
                <mat-icon matListIcon>settings</mat-icon>
            </a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary" class="mat-elevation-z3">
            <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
      My App
    </mat-toolbar>
    <div class="app-content">
      <router-outlet></router-outlet>  // router-outlet
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

currently this page is loading when I run the application.I want to show a full screen login page rather showing the home page first .

const  routings: Routes = [
    {path:'',redirectTo:'/app-root',pathMatch:'full'},
    {path:'home',component:HomeComponent},
    {path:'account',component:AccountComponent},
    {path:'settings',component:SettingsComponent},
    {path:'**',redirectTo:'/app-root',pathMatch:'full'},
];

currently I redirect to app-root when the url is ' ' and dirty instead I want to redirect to login .

can anyone help me to solve this .

Answer 1

Using a guard will be more efficient solution for your case. Because the thing you want to achieve is blocking any anonymous call to your AppComponent.

Create a guard which will check if the user is authenticated or not. Apply the guard to your AppComponent. And in your guard if the user is not authenticated redirect to your LoginComponent.

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable()
export class LoginGuard implements CanActivate {
    constructor(private router: Router) {}

    canActivate() {
        //authentication check logic
    }
}

You can implement your authentication check logic in canActivate function.