Te copio mi ejemplo funcional, está tomado del mismo lugar y tiene solo unas pequeñas modificaciones en cuanto al ts, también te voy a agregar un ejmploejemplo de php y un ejemplootro en plunker, para que lo puedas ver implementado:
import {Injectable} from '@angular/core';
import {Http, Headers, Response, RequestOptions} from '@angular/http';
import {Observable} from "rxjs/Rx";
@Injectable()
export class AuthenticationService {
public token: string;
constructor(private http: Http) {
// Si ya tengo token, lo recupero del localStorage
var currentUser = JSON.parse(localStorage.getItem('currentUser'));
this.token = currentUser && currentUser.token;
}
login(username: string, password: string): Observable<boolean> {
let headers = new Headers({'Content-Type': 'application/json'});
let options = new RequestOptions({headers: headers});
return this.http.post('http'https://localhost/aplicacion/serverphptests-arielcessario167741.codeanyapp.com/usuarioslogin.php', JSON.stringify({
mail: username,
password: password
}), options)
.map((response: Response) => {
// Aquí agrega un:
console.log(response);
// para verificar la respuesta desde el servidor
// En mi caso, desde el servidor, devuelvo un usuario además del toke
let token = response.json() && response.json().token;
let user = response.json() && response.json().user;
if (token) {
// set token property
this.token = token;
// store username and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('currentUser', JSON.stringify({user: user, token: token}));
// return true to indicate successful login
return true;response;
} else {
// return false to indicate failed login
return false;
}
}).catch((err: Response, caught: Observable<any>)=> {
console.log(err);
return Observable.throw(err);
});
}
logout(): void {
// clear token remove user from local storage to log user out
this.token = null;
localStorage.removeItem('currentUser');
}
}
Te va a dar un error por tratar de CORSacceder a un sitio externo, para que te funcione, debes instalar esta extensión de Chrome: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en