A great way to take your app to the next level is to implement 

, which are interfaces that protect routes and grant access based on defined permissions.  This is useful for apps with an admin dashboard.

 where a user can access the dashboard once logged in.

Once our new app is generated run the app:

Now that we know our app is working we can begin to build our components.

ng generate component login

ng generate component dashboard

 will automatically add our components to the 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Let's create a routing module to handle what components a user will see when browsing our app.

ng generate module app-routing --flat --module=app

 option will only generate a file instead of a folder. and it will be on the base level.

 option is to tell the cli which module to register the new module to. in this example it is the 'app' module.


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }


import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';

Now that we have our components imported next create an array of objects named routes of type 

. Each object is a route with a path and a component to render to that path.

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent},
];

keep in mind the order of the paths matters as the first one matched will be rendered.

Our path value is which url path the component will render to. An empty path 

 with the value full to tell the browser to re-direct the user to the login path if the url path is empty.

We want our router to be configured at the app's root level. To do so we'll use the 

 metadata imports array and pass the routes array into 

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)

  ],
  declarations: []
})

 directive and other directives including service providers anywhere in the app.

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]

})

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent,},
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]

})
export class AppRoutingModule { }


 and declarations are removed since they are unused. It's good practice to remove what you don't use. This keeps code bloat to a minimum.

 imported. The file should look like this.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { AppRoutingModule } from './app-routing.module';
import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


If we visit the browser and navigate to our paths notice that nothing changes. Why is that?

We've missed one crucial step, which is implementing the 

 and simple navigation to our login and dashboard routes.

The app's template should look like this:

<nav>
  <a routerLink="login">home</a>
  <br>
  <a routerLink="dashboard">dashboard</a>
</nav>
<router-outlet></router-outlet>


Once that's done we can visit each of our paths directly in the browser.

We can now see our components render to the browser.
Let's stub out functionality. Stubbing is like blueprinting. We add placeholder functionality as a guide which helps in debugging.

 component to handle access to our dashboard by granting the user permission via a guard (more on this later).

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  message = 'status: N/A' ;

  constructor() {
  }

  ngOnInit() {

  }


  login() {
    this.message = 'status: logged in'
  }

  logout() {
    this.message = 'status: logged out'
  }

}

<div>
  <h1>Login page</h1>
  <h2>{{ message }}</h2>

  <div>
    <button (click)="login()" >Login</button>
    <button (click)="logout()">Logout</button>
  </div>
</div>


What we've done is to interpolate a simple message that is attached to the two buttons click events that call our methods: 

 component later to integrate the guard we're creating next.

By default our newly generated guard implements the 


import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }
}

 that accepts the parameters: next, and state and returns a boolean.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthGuard } from './auth/auth.guard';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]

})
export class AppRoutingModule { }


Next we need to update our guard with specific conditions. These conditions we'll create through a service.

we are making a service to mock authentication conditions. our guard will call the service to login a user and retain that user's information.

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  isLoggedIn = false;
  redirectUrl: string;

  login(): Observable<boolean> {

  }

  logout(): void {
  }
}


We have created a login method as an observable, a logout method, a boolean flag 

Update the login method to return an emitted value of true. This will simulate an 

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { tap, delay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  isLoggedIn = false;
  redirectUrl: string;

  login(): Observable<boolean> {
    return of(true).pipe(
      delay(1000),
      tap(val => this.isLoggedIn = true)
    );
  }

  logout(): void {
    this.isLoggedIn = false;
  }
}


AUTHOR

Patrick Funom Tunga-Lergo

A great way to take your app to the next level is to implement Guards, which are interfaces that protect routes and grant access based on defined permissions. This is useful for apps with an admin dashboard. Think of a CMS like WordPress where a user can access the dashboard once logged in. Check…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

How To Protect Routes In Angular

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript