Screenshot of the issue:
Access the complete project here:
Link to a Plunker example of a log-in screen:
http://plnkr.co/edit/j69yu9cSIQRL2GJZFCd1?p=preview
(The username and password for this example are both set as "test")
Snippet with the error in the code:
return this.http.post('/auth/login', JSON.stringify({})
Full script of dashboard.component.ts
import {Component, OnInit} from 'angular2/core';
import {Router} from 'angular2/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HeroesComponent} from './heroes.component';
import {HeroDetailComponent} from './hero-detail.component';
import {SpreadSheetComponent} from './spreadsheeteditall.component';
import {SwitchUsersComponent} from './SwitchUsers.component';
import {BiddingPageComponent} from './BiddingPage.component';
import { Injectable } from 'angular2/core';
import { Jsonp, URLSearchParams } from 'angular2/http';
import {HTTP_PROVIDERS, Http, Headers} from 'angular2/http';
import {JSONP_PROVIDERS} from 'angular2/http';
@Component({
selector: 'my-dashboard',
templateUrl: 'app/dashboard.component.html',
styleUrls: ['app/dashboard.component.css'],
directives: [ROUTER_DIRECTIVES],
providers : [HTTP_PROVIDERS, Http],
})
export class DashboardComponent implements OnInit {
heroes: Hero[] = [];
constructor(private _http: Http, private _heroService: HeroService, private _router: Router) {
this.token = localStorage.getItem('token');
}
ngOnInit() {
this._heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1,5));
}
gotoDetail(hero: Hero) {
let link = ['HeroDetail', { id: hero.id }];
this._router.navigate(link);
}
@Injectable()
token: string;
login(username: String, password: String) {
return this.http.post('/auth/login', JSON.stringify({});
// username: username,
// password: password
// }), {
// headers: new Headers({
// 'Content-Type': 'application/json'
// })
// })
// .map((res : any) => {
// let data = res.json();
// this.token = data.token;
// localStorage.setItem('token', this.token);
// });
// For demonstration purposes only, we will simulate this
if (username === 'test' && password === 'test') {
this.token = 'token';
localStorage.setItem('token', this.token);
//return Rx.Observable.of('token');
}
//return Rx.Observable.throw('authentication failure');
,
logout() {
}}
/*
return this._http.get(this.config.serverUrl + '/auth/logout', {
headers: new Headers({
'x-security-token': this.token
})
})
.map((res : any) => {
this.token = undefined;
localStorage.removeItem('token');
});
// this.token = undefined;
// localStorage.removeItem('token');
// return Rx.Observable.of(true);
}
}