Adding route authentication controls with route guards

The nature of single-page applications wholly controlling the process of routing affords them the ability to control each stage of the process. For you, this means that you can intercept route changes as they happen and make decisions about where the user should go.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/6135/.

Getting ready

In this recipe, you'll build a simple pseudo-authenticated application from scratch.

You goal is to protect users from certain views when they are not authenticated, and at the same time, implement a sensible login/logout flow.

How to do it...

Begin by defining two initial views with routes in your application. One will be a Default view, which will be visible to everybody, and one will be a Profile view, which will be only visible to authenticated users:

[app/app.module.ts] 
 
import {NgModule} from '@angular/core'; 
import {BrowserModule} from '...