sonicoder86

// components/hero-detail/hero-detail.component.ts
import { Component } from '@angular/core';

import { CanActivate, ComponentInstruction } from '@angular/router-deprecated';

@Component({ ... })
@CanActivate((next: ComponentInstruction, prev: ComponentInstruction) => {
  return isAuthTokenValid();
})
export class HeroDetailComponent { ... }

sonicoder86

// auth-guard.ts
import { Injectable } from '@angular/core';
import {
  CanActivate,
  Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from '@angular/router';

import { AuthService } from './services/auth/auth.service';

sonicoder86

// routes.ts
import { provideRouter, RouterConfig } from '@angular/router';

import { HeroesComponent } from './components/heroes/heroes.component';
import { HeroDetailComponent } from './components/hero-detail/hero-detail.component';
import { LoginComponent } from './components/login/login.component';
import { AuthGuard } from './auth-guard';

export const appRoutes: RouterConfig = [
  { path: '', component: HeroesComponent, terminal: true },

sonicoder86

// app.component.ts
import { Component } from '@angular/core';
import { RouteConfig, RouterOutlet } from '@angular/router-deprecated';

import { HomeComponent } from './home.component';
import { LoginComponent } from './login.component';
import { ProfileComponent } from './profile.component';

@Component({
  selector: 'auth-app',

sonicoder86

// user.service.ts
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import localStorage from 'localStorage';

@Injectable()
export class UserService {
  private loggedIn = false;

  constructor(private http: Http) {

sonicoder86

// login.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router-deprecated';

import { UserService } from './user.service';

@Component({
  selector: 'login',
  template: `...`
})

sonicoder86

// logged-in-router-outlet.ts
import { 
  ElementRef, DynamicComponentLoader, AttributeMetadata, Directive, Attribute 
} from '@angular/core';
import { Router, RouterOutlet, ComponentInstruction } from '@angular/router-deprecated';

import { UserService } from './user.service';

@Directive({
  selector: 'router-outlet'

sonicoder86

// app.component.ts
...
import { LoggedInRouterOutlet } from './logged-in-router-outlet';

@Component({
  selector: 'auth-app',
  directives: [LoggedInRouterOutlet],
  template: `
  <div class="container body-container">
    <router-outlet></router-outlet>

sonicoder86

// user.service.ts
export function isLoggedIn() {
  return !!storage.getAuthToken();
}

// profile.component.ts
import { Component } from '@angular/core';
import { CanActivate } from '@angular/router-deprecated';

import { isLoggedIn } from './user.service';

sonicoder86

// app-injector.ts
import { Injector } from '@angular/core';

let appInjectorRef: Injector;
export const appInjector = (injector?: Injector):Injector => {
  if (injector) {
    appInjectorRef = injector;
  }

  return appInjectorRef;