Angular 2 Authentication with child routes

Question

I have an angular 2 application in which I need to be authenticated on every page. So I have implemented a custom RouterOutlet to confirm I am logged in on every page change

Answer 1

For anyone that finds this, the answer now in Angular 2 is to use "Guards" as part of the new Router. See Angular 2 documentation:

https://angular.io/docs/ts/latest/guide/router.html#!#guards

A basic guard just implements "CanActivate", and could work as follows:

import {Injectable} from "@angular/core";
import {CanActivate, Router} from "@angular/router";
import {AuthService} from "../services/auth.service";

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private authService:AuthService, private router:Router){}

    canActivate(){
        if(this.authService.isAuthenticated())
            return true;

        this.router.navigate(["/login"]);
        return false;
    }
}

As you can see in this example I have an AuthService running somewhere else (implementation isn't important) which can tell the guard if the user has been authenticated. If they have, return true and the navigation happens as usual. If they have not, we return false and redirect them to the login screen.

Answer 2

Here's an updated example of using an AuthGuard with Angular 2 RC6.

Routes with home route protected by AuthGuard

import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login/index';
import { HomeComponent } from './home/index';
import { AuthGuard } from './_guards/index';

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },

    // home route protected by auth guard
    { path: '', component: HomeComponent, canActivate: [AuthGuard] },

    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

AuthGuard redirects to login page if user isn't logged in

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

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate() {
        if (localStorage.getItem('currentUser')) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page
        this.router.navigate(['/login']);
        return false;
    }
}

For the full example and working demo you can check out this post

Answer 3

You can also use CanActivate, however direct DI is not supported at the moment. Here is a nice workaround tho.

Good luck.