Ionic 4 and Angular 7 Tutorial: Securing Pages using Route Guard

The comprehensive step by step tutorial on securing pages using Ionic 4 and Angular 7 Route Guard. In the previous Ionic and Angular authentication tutorial, we just securing the API calls. Now, we are securing both API calls and Ionic 4/Angular 7 pages. Using Route Guard will be denied an unauthorized user to access the secure pages. For the REST API, we will use our existing Node, Express, Passport and MongoDB that you can get from our GitHub.

Table of Contents:

• Create a new Ionic 4 and Angular 7 App
• Create a custom Angular 7 HttpInterceptor
• Create Ionic 4 Angular 7 Authentication and Book Services
• Create an Ionic 4 and Angular 7 Page for Displaying Books
• Create the Ionic 4 and Angular 7 Pages for Login and Register
• Secure the Guarded Book Page using Angular 7 Route Guard
• Run and Test the Ionic 4 and Angular 7 Securing Pages using Route Guard

The best practice uses both Route Guards in Ionic 4 and Angular 7 app and Secure API in the API server

The Ionic 4 and Angular 7 app similar with the previous tutorial except add the Route Guard to securing the restricted page. The Angular Route Guard use to prevent unauthorized user to navigate to the target component so the user should log in first. The workflow diagram below shows the flow of the whole application.

The following tools, frameworks, and modules are required for this tutorial:

• Node.js (Recommended Version)
• Angular 7
• Ionic 4
• Node, Express, Passport, and MongoDB API Example
• Terminal or Command Line
• IDE or Text Editor

Before going to the main steps, we assume that you have to install Node.js. Next, upgrade or install new Ionic 4 CLI by open the terminal or Node command line then type this command.

sudo npm install -g ionic

You will get the latest Ionic CLI in your terminal or command line. Check the version by type this command.

ionic --version
5.0.2

Create a new Ionic 4 and Angular 7 App

To create a new Ionic 4 and Angular 7 application, type this command in your terminal.

ionic start ionic4-angular7-routeguard blank --type=angular

That command creating the new Ionic and Angular type with the name ionic4-angular7-routeguard.  If you see this question, just type `N` for because we will installing or adding Cordova later.

Integrate your new app with Cordova to target native iOS and Android? (y/N) N

After installing `NPM` modules and dependencies, you will see this question, just type `N` because we are not using it yet.

Install the free Ionic Pro SDK and connect your app? (Y/n) N

Next, go to the newly created app folder.

cd ./ionic4-angular7-routeguard

As usual, run the Ionic 4 and Angular 7 app for the first time, but before run as `lab` mode, type this command to install `@ionic/lab`.

npm install --save-dev @ionic/lab
ionic serve -l

Now, open the browser and you will the Ionic 4 and Angular 7 app with the iOS, Android, or Windows view. If you see a normal Ionic 4 blank application, that's mean you ready to go to the next steps.

Create a custom Ionic 4 Angular 7 HttpInterceptor

Before creating a custom Angular 7 HttpInterceptor, create a folder under `app` folder.

mkdir src/app/interceptors

Next, create a file for the custom Angular 7 HttpInterceptor.

touch src/app/interceptors/token.interceptor.ts

Open and edit that file the add these imports of Angular Common HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse, HttpErrorResponse, RxJS Observable, throwError, map, catchError, Router, Ionic ToastController.

import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import {
  Router
} from '@angular/router';
import { ToastController } from '@ionic/angular';

Create a class that implementing HttpInterceptor method.

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

}

Inject the required module to the constructor inside the class.

constructor(private router: Router,
  public toastController: ToastController) {}

Implement a custom Interceptor function.

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

  const token = localStorage.getItem('token');

  if (token) {
    request = request.clone({
      setHeaders: {
        'Authorization': token
      }
    });
  }

  if (!request.headers.has('Content-Type')) {
    request = request.clone({
      setHeaders: {
        'content-type': 'application/json'
      }
    });
  }

  request = request.clone({
    headers: request.headers.set('Accept', 'application/json')
  });

  return next.handle(request).pipe(
    map((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        console.log('event--->>>', event);
      }
      return event;
    }),
    catchError((error: HttpErrorResponse) => {
      if (error.status === 401) {
        if (error.error.success === false) {
          this.presentToast('Login failed');
        } else {
          this.router.navigate(['login']);
        }
      }
      return throwError(error);
    }));
}

Add function for calling a toast controller.

async presentToast(msg) {
  const toast = await this.toastController.create({
    message: msg,
    duration: 2000,
    position: 'top'
  });
  toast.present();
}

Next, we have to register this custom HttpInterceptor and HttpClientModule. Open and edit `src/app/app.module.ts` then add these imports of Angular Common HTTP_INTERCEPTORS, HttpClientModule, and TokenInterceptor.

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { TokenInterceptor } from './inteceptors/token.interceptor';

Add those modules to the provider array of the `@NgModule`.

providers: [
  StatusBar,
  SplashScreen,
  { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  {
    provide: HTTP_INTERCEPTORS,
    useClass: TokenInterceptor,
    multi: true
  }
],

Now, the HTTP interceptor is ready to intercept any request to the API.

Create Ionic 4 Angular 7 Authentication and Book Services

First, create a folder for those services under `src/app/`.

mkdir src/app/services

Create services or providers for authentication and book.

ionic g service services/auth
ionic g service services/book

Next, open and edit `src/app/services/auth.service.ts` then replace all codes with this Angular HttpClient that calls CRUD from REST API.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  apiUrl = 'http://localhost:3000/api/';
  isLoggedIn = false;
  redirectUrl: string;

  constructor(private http: HttpClient) { }

  login(data: any): Observable<any> {
    return this.http.post<any>(this.apiUrl + 'signin', data)
      .pipe(
        tap(_ => this.isLoggedIn = true),
        catchError(this.handleError('login', []))
      );
  }

  logout(): Observable<any> {
    return this.http.get<any>(this.apiUrl + 'signout')
      .pipe(
        tap(_ => this.isLoggedIn = false),
        catchError(this.handleError('logout', []))
      );
  }

  register(data: any): Observable<any> {
    return this.http.post<any>(this.apiUrl + 'signup', data)
      .pipe(
        tap(_ => this.log('login')),
        catchError(this.handleError('login', []))
      );
  }

  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error); // log to console instead
      this.log(`${operation} failed: ${error.message}`);
      return of(result as T);
    };
  }

  private log(message: string) {
    console.log(message);
  }
}

Next, open and edit `src/app/services/book.service` then replace all codes with this.

import { Injectable } from '@angular/core';
import { Book } from '../book/book';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class BookService {

  apiUrl = 'http://localhost:3000/api/';

  constructor(private http: HttpClient) { }

  getBooks (): Observable<Book[]> {
    return this.http.get<Book[]>(this.apiUrl + 'book')
      .pipe(
        tap(_ => this.log('fetched books')),
        catchError(this.handleError('getBooks', []))
      );
  }

  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      this.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }

  /** Log a HeroService message with the MessageService */
  private log(message: string) {
    console.log(message);
  }
}

Create an Ionic 4 and Angular 7 Page for Displaying Books

Type this command to generate an Ionic 4 and Angular 7 page for the book.

ionic g page book

Create a Typescript file for handle Book object or as a model for Book object.

touch src/app/book/book.ts

Open and edit that file then replaces all codes with this.

export class Book {
  _id: number;
  isbn: string;
  title: string;
  author: number;
  publisher: Date;
  __v: number;
}

Next, open and edit `src/app/book/book.page.ts` then add these imports.

import { Book } from './book';
import { BookService } from '../services/book.service';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';

Inject all required modules to the constructor.

constructor(private bookService: BookService,
  private authService: AuthService,
  private router: Router) { }

Declare this variable before the constructor.

books: Book[];

Create a function for consuming or get a book list from the `BookService`.

getBooks(): void {
  this.bookService.getBooks()
    .subscribe(books => {
      console.log(books);
      this.books = books;
    });
}

Call this function from `ngOnInit`.

ngOnInit() {
  this.getBooks();
}

Add a function for log out the current session.

logout() {
  this.authService.logout()
    .subscribe(res => {
      console.log(res);
      localStorage.removeItem('token');
      this.router.navigate(['home']);
    });
}

Next, open and edit `src/app/book/book.page.html` then replace all HTML tags with this.

<ion-header>
  <ion-toolbar>
    <ion-title>List of Books</ion-title>
    <ion-buttons slot="end">
      <ion-button color="secondary" (click)="logout()">
        <ion-icon slot="icon-only" name="exit"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let b of books">
      <ion-label>{{b.title}}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

The book page just shows the list of the book and log out button on the title bar.

Create the Ionic 4 and Angular 7 Pages for Login and Register

Before creating that pages, create this folder under `src/app`.

mkdir src/app/auth

Now, generate the Ionic 4 and Angular 7 pages.

ionic g page auth/login
ionic g page auth/register

Next, open and edit `src/app/auth/login/login.page.ts` then replace all codes with this implementation of Login using FormBuilder, FormGroup, NgForm, Validators, and POST form data to the AuthService.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
import { ToastController } from '@ionic/angular';

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

  loginForm: FormGroup;

  constructor(private formBuilder: FormBuilder,
    private router: Router,
    private authService: AuthService,
    public toastController: ToastController) { }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      'username' : [null, Validators.required],
      'password' : [null, Validators.required]
    });
  }

  onFormSubmit(form: NgForm) {
    this.authService.login(form)
      .subscribe(res => {
        if (res.token) {
          localStorage.setItem('token', res.token);
          this.router.navigate(['book']);
        }
      }, (err) => {
        console.log(err);
      });
  }

  register() {
    this.router.navigate(['register']);
  }

  async presentToast(msg) {
    const toast = await this.toastController.create({
      message: msg,
      duration: 2000,
      position: 'top'
    });
    toast.present();
  }

}

Next, open and edit `src/app/auth/login/login.module.ts` then add the import of `ReactiveFormsModule`.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

Add that module to the `@NgModule` imports array.

imports: [
  CommonModule,
  FormsModule,
  IonicModule,
  ReactiveFormsModule,
  RouterModule.forChild(routes)
],

Next, open and edit `src/app/auth/login/login.page.html` then replace all HTML tags with this FormGroup, FormControl, <ion-card>, and <ion-item>.

<ion-content padding>
  <form [formGroup]="loginForm" (ngSubmit)="onFormSubmit(loginForm.value)">
    <ion-card>
      <ion-card-header>
        <ion-card-title>Please, Sign In</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-item>
          <ion-label position="floating">Username</ion-label>
          <ion-input type="text" formControlName="username"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="floating">Password</ion-label>
          <ion-input type="password" formControlName="password"></ion-input>
        </ion-item>
        <ion-item lines="none" lines="full" padding-top>
          <ion-button expand="full" size="default" shape="round" color="success" type="submit" [disabled]="!loginForm.valid">Login</ion-button>
        </ion-item>
        <ion-item lines="none">
          <ion-button type="button" expand="full" size="default" shape="round" color="medium" (click)="register()">Register</ion-button>
        </ion-item>
      </ion-card-content>
    </ion-card>
  </form>
</ion-content>

Next, open and edit `src/app/auth/register/register.page.ts` then replace all codes with this implementation of Register User using FormBuilder, FormGroup, NgForm, Validators, and POST form data to the AuthService.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
import { ToastController, AlertController } from '@ionic/angular';

@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {

  registerForm: FormGroup;

  constructor(private formBuilder: FormBuilder,
    private router: Router,
    private authService: AuthService,
    public toastController: ToastController,
    public alertController: AlertController) { }

  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      'username' : [null, Validators.required],
      'password' : [null, Validators.required]
    });
  }

  onFormSubmit(form: NgForm) {
    this.authService.register(form)
      .subscribe(_ => {
        this.presentAlert('Register Successfully', 'Please login with your new username and password');
      }, (err) => {
        console.log(err);
      });
  }

  async presentToast(msg) {
    const toast = await this.toastController.create({
      message: msg,
      duration: 2000,
      position: 'top'
    });
    toast.present();
  }

  async presentAlert(header, message) {
    const alert = await this.alertController.create({
      header: header,
      message: message,
      buttons: [{
          text: 'OK',
          handler: () => {
            this.router.navigate(['login']);
          }
        }]
    });

    await alert.present();
  }

}

Next, open and edit `src/app/auth/register/register.module.ts` then add the import of `ReactiveFormsModule`.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

Add that module to the `@NgModule` imports array.

imports: [
  CommonModule,
  FormsModule,
  IonicModule,
  ReactiveFormsModule,
  RouterModule.forChild(routes)
],

Open and edit `src/app/auth/register/register.page.html` then replace all HTML tags with this.

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Register</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <form [formGroup]="registerForm" (ngSubmit)="onFormSubmit(registerForm.value)">
    <ion-card>
      <ion-card-header>
        <ion-card-title>Register here</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-item>
          <ion-label position="floating">Username</ion-label>
          <ion-input type="text" formControlName="username"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="floating">Password</ion-label>
          <ion-input type="password" formControlName="password"></ion-input>
        </ion-item>
        <ion-item lines="none" padding-top>
          <ion-button expand="full" size="default" shape="round" color="success" type="submit" [disabled]="!registerForm.valid">Register</ion-button>
        </ion-item>
      </ion-card-content>
    </ion-card>
  </form>
</ion-content>

Secure the Guarded Book Page using Angular 7 Route Guard

This is the main part of the Ionic 4 tutorial. Type this command to generate a guard configuration file.

ng generate guard auth/auth

Open and edit that file then add this Angular 7 / Typescript imports of Angular Router CanActivate, ActivatedRouterSnapshot, RouterStateSnapshot, RxJS Observable, and AuthService.

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';

Next, add this implements code to the Class name.

export class AuthGuard implements CanActivate

Inject the `AuthService` and the `Router` to the constructor params.

constructor(private authService: AuthService, private router: Router) {}

Add the function for the Route Guard.

canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): boolean {
  const url: string = state.url;

  return this.checkLogin(url);
}

Add the function to check the login status and redirect to the login page if it's not logged in and redirect to the Guarded page if it's logged in.

checkLogin(url: string): boolean {
  if (this.authService.isLoggedIn) { return true; }

  // Store the attempted URL for redirecting
  this.authService.redirectUrl = url;

  // Navigate to the login page with extras
  this.router.navigate(['/login']);
  return false;
}

Next, open and edit `src/app/app-routing.module.ts` then add this import.

import { AuthGuard } from './auth/auth.guard';

Modify the book path, so it will look like this.

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'book', canActivate: [AuthGuard], loadChildren: './book/book.module#BookPageModule' },
  { path: 'login', loadChildren: './auth/login/login.module#LoginPageModule' },
  { path: 'register', loadChildren: './auth/register/register.module#RegisterPageModule' },
];

Run and Test the Ionic 4 and Angular 7 Securing Pages using Route Guard

Before run and the test the Ionic 4 and Angular 7 secure application, open the new terminal tab to run the MongoDB database.

mongod

In the other tab run the Node.js and Express.js secure REST API.

nodemon

In the main terminal tab run the Ionic 4 and Angular 7 application.

ionic serve -l

So, the whole application will look like this.

That it's, the Ionic 4 and Angular 7 Securing Pages using Route Guard. You can find the full source code from our GitHub.

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ionic 4 - Full Starter App and save development and design time. Android, iOS, and PWA, 100+ Screens and Components, the most complete and advance Ionic Template.

That just the basic. If you need more deep learning about Ionic, Angular, and Typescript, you can take the following cheap course:

• IONIC 4 Design Hybrid Mobile Applications IOS & Android
• Wordpress Rest API and Ionic 4 (Angular) App With Auth
• Mobile App from Development to Deployment - IONIC 4
• Ionic 4 Crash Course with Heartstone API & Angular
• Ionic 4 Mega Course: Build 10 Real World Apps

Thanks!