sonicoder86

// boot.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { ComponentRef } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';

import { AppComponent } from './app.component';
import { UserService } from './user.service';
import { appInjector } from './app-injector';

sonicoder86

// can-activate-private-metadata.ts
import { Router } from '@angular/router-deprecated';
import { makeDecorator } from '@angular/core/src/util/decorators';
import { CanActivate as CanActivateMetadata } 
  from '@angular/router-deprecated/src/lifecycle/lifecycle_annotations_impl';

import { appInjector } from './app-injector';
import { UserService } from './user.service';

class PrivateMetadata extends CanActivateMetadata {

sonicoder86

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

@Injectable()
export class ProfileService {
  constructor(private http: Http) {}

  getProfile() {

sonicoder86

// app.component.ts
import { Component } from '@angular/core';

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

sonicoder86

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

export const routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'profile', component: ProfileComponent }
];

sonicoder86

// boot.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { routes } from './app.routes';

sonicoder86

// user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

  constructor(private http: HttpClient) {
    this.loggedIn = !!localStorage.getItem('auth_token');

sonicoder86

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

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

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

sonicoder86

// logged-in.guard.ts
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { UserService } from './user.service';

@Injectable()
export class LoggedInGuard implements CanActivate {
  constructor(private user: UserService) {}

  canActivate() {

sonicoder86

// app.routes.ts
...
import { LoggedInGuard } from 'logged-in.guard';

export const routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'profile', component: ProfileComponent, canActivate: [LoggedInGuard] }
];