app.component.html

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-color--grey-100">
	<header class="mdl-layout__header" *ngIf="userLogged">
		<!-- content here should only visiable to members only -->
	</header>

	<div class="mdl-layout__drawer">
	</div>
	<main class="mdl-layout__content">

		<section class="mdl-layout__tab-panel is-active" *ngIf="userLogged">
		<!-- content here should only visiable to members only -->
		</section>
		<br />
		<div class="page-content">
			<router-outlet></router-outlet>
		</div>
	</main>
	<!--<story-spinner></story-spinner>
    <toast></toast>
    <modal-confirm></modal-confirm>-->
</div>

app.component.ts

import { Component, ChangeDetectionStrategy, OnInit, OnDestroy } from '@angular/core';
import { Router, RouterLink } from '@angular/router';
import { Observable, Subscription } from 'rxjs';

import { TranslateService } from 'ng2-translate/ng2-translate';

import { ModulesComponent, ModuleService, Module, ComponentType } from './modules/modules';
import { SharedModule, MessageService, AuthService } from './shared/shared';

@Component({
    selector: 'my-app',
    template: require('./app.component.html'),
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
    userLogged: boolean = false;
    constructor(
        private translate: TranslateService,
        private _messageService: MessageService,
        private _moduleService: ModuleService,
        private _authService: AuthService,
        private _router: Router
    ) {

    }

    initlize() {
       /** code omitted for easy reading **/
    }

   
    ngOnInit() {      
        this.userLogged = this._authService.isLogged();//this must read from service again
        this.initlize();
    }

    ngOnDestroy() {
        /** unsubscribe code here ommited **/
    }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router";

import { AppComponent } from './app.component';
import { SharedModule, MessageService, Navbar, AuthService } from './shared/shared';
import { ModulesComponent, ModuleService, ModuleListComponent } from './modules/modules';
import { ROUTES } from './app.routing';

import { Login } from './login/index';


@NgModule({
    declarations: [
        AppComponent,
        Login,
        Navbar
    ],
    imports: [
        BrowserModule,
        SharedModule,
        RouterModule.forRoot(ROUTES)
    ],
    exports: [BrowserModule],

    providers: [
        ModuleService,
        AuthService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

auth.service.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';

import { ExceptionService, SpinnerService } from '../blocks/blocks';
import { CONFIG } from './config';
import { MessageService } from './message.service';

let authUrl = CONFIG.baseUrls.auth;

export interface UserData {
    userID: number;
    userName: string;
    defaultLang: number;
    admin: number;
    active: number;
}

export interface LoginViewModel {
    userName: string;
    password: string;
}

@Injectable()
export class AuthService {

    loggedIn = false;
    authResult: any;
    constructor(private _http: Http,
        private _exceptionService: ExceptionService,
        private _messageService: MessageService,
        private _spinnerService: SpinnerService) {
        this.loggedIn = !!sessionStorage.getItem('currentUser');
    }


    login(loginViewModel: LoginViewModel) {
        let body = JSON.stringify(loginViewModel);
        var headers = new Headers();
        headers.append('Content-Type', 'application/json');
        this._spinnerService.show();
        return this._http
            .post(`${authUrl}/login`, body, { headers: headers })
            .map(res => res.json())
            .map((res) => {
                if (res.success) {
                    sessionStorage.setItem('currentUser', JSON.stringify(res.user));
                    this.loggedIn = true;
                }
                return res.success;
            })
            .finally(() => this._spinnerService.hide());
    }


    isLogged() {
        this.loggedIn = !!sessionStorage.getItem('currentUser');
        return this.loggedIn;
    }


}

login.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { AuthService, LoginViewModel } from '../shared/shared';

const styles   = require('./login.component.css');
const template = require('./login.component.html');

@Component({
  selector: 'login',
  template: template,
  styles: [ styles ]
})
export class Login {
 
loginModel: LoginViewModel = { userName: 'mohamed', password: '123456' };
    public errorMsg = '';
    authResult: any;

    constructor(private _authService: AuthService,
        private _router: Router) { }

    login() {
        this._authService.login(this.loginModel).subscribe(
            u => {
                if (u) {
                    this.authResult = u;
                }
            },
            error => { },
            () => {
                this.errorMsg = '';
                if (this.authResult) {
                    this._authService.loggedIn= true;
                    this._router.navigateByUrl('/modules');
                   // window.location.replace('/modules');
                } else {
                    this.errorMsg = "username or password is invalid";
                }
            });
    }
}