angular2AuthService

appModule.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import{ Login } from '../pages/login/login';
import { Auth } from '../providers/auth';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    Login
  ],
  imports: [
     HttpModule,
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    Login
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},Auth
]
})
export class AppModule {}

auth.ts

import { Injectable } from '@angular/core';
import { Http,Headers,Response } from '@angular/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the Auth provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class Auth {

  baseUrl:string='http://www.nepalivivah.com/mobile-test/accessapi/login/';
  constructor(public http: Http) {
    console.log('Hello Auth Provider');
  }

    createAuthorizationHeader(headers:Headers){
  headers.append('Authorization',window.localStorage.getItem('token'));
  }
private(){
  let headers= new Headers();
  this.createAuthorizationHeader(headers)
  return this.http.get(this.baseUrl+'private',{
    headers:headers
  }).map(res=>res.json());
  
}

login(data){
  return this.http.post(this.baseUrl+"login",data)
  .map(this.extractData);
}

isLogged(){
if(window.localStorage.getItem('token')){
  return true
}else{
  return false;
}
}
logout(){
  window.localStorage.removeItem('token')
  return true;
}

private extractData(res:Response){
  let body =res.json();
  alert(body);
  if(body.success===true){
    window.localStorage.setItem('token',body.token);
  };
  return body || {};
}

}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
    <button (click)="logout()" ion-only></button>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    {{data}}
  </p>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Login } from '../login/login';
import { Auth } from '../../providers/auth';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

data:string;
  constructor(public navCtrl: NavController,private auth :Auth) {
    this.auth.private().subscribe(data=>{
      this.data=data.message
    } );

  }
    logout(){
      this.auth.logout();
      this.navCtrl.setRoot(Login);
    }

}

login.html

<!--
  Generated template for the Login page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>login</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
<form #FormLogin="ngForm" (ngSubmit)="login(FormLogin)">

  <ion-item>
    <ion-label floating>Email</ion-label>
    <ion-input [(ngModel)]="FormLogin.email" name="email" type="text" required></ion-input>
  </ion-item>

  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input [(ngModel)]="FormLogin.password" name="password" type="password" required></ion-input>
  </ion-item>

<ion-item>
  <button [disabled]="!FormLogin.form.valid"  type="submit" full ion-button>Login</button>
</ion-item>
</form>
</ion-content>

login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController,AlertController } from 'ionic-angular';
import { HomePage } from '../home/home';
import { Auth } from '../../providers/auth';
/**
 * Generated class for the Login page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class Login {
data:any;
  constructor(public navCtrl: NavController,
  private auth: Auth,
  public alertCtrl: AlertController) {}

  login(FormLogin){
     this.auth.login(FormLogin.value).subscribe(data=>{
       if(data.success===true){
         this.navCtrl.setRoot(HomePage);
       }else{
         FormLogin.password='';
         let alert=this.alertCtrl.create({
           title:'Login Failed',
           subTitle:data.message,
           buttons:['ok']
         })
         alert.present();
       }
     })
   }

}