Angular2 Authentication : there's something wrong with POST request?

Question

Hi I am trying to authenticate users and once the server gives user's information, I want to use the information of the user.

But for some reasons, even though I did the log in process without any error and I can see from developer's tool that the POST request has been successful, I can't quite set currentUser in my localStorage (giving me null if I console.log it)

What am I doing wrong?

This is my authentication service.

export class AuthenticationService {

constructor(private http: Http, private router: Router) { }

login(email: string, password: string): Observable<User>{
    const headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    headers.append('Access-Control-Allow-Headers', 'Content-Type');
    headers.append('Access-Control-Allow-Methods', 'post');
    headers.append('Access-Control-Allow-Origin', '*');
    headers.append("X-Requested-With", "XMLHttpRequest");

    let options = new RequestOptions({ headers: headers });

    let body = new URLSearchParams();
    body.set('email', email);
    body.set('password', password);

    return this.http.post(`${environment.baseurl}` + '/api/v2/member/login', body, options)
        .map(this.extractData)
        .catch(this.handleError);
}

private extractData(res: Response) {
    let user = res.json();
    if (user && user.token) {
        localStorage.setItem('currentUser', JSON.stringify(user));
    }
    return user.data || {}; 
}

logout() {
    // remove user from local storage to log user out
    localStorage.removeItem('currentUser');

}

private handleError(error: any) {

    if (error.status === 401) {
        return Observable.throw(error.status);
    } else {
        return Observable.throw(error.status || 'Server error');
    }
}
 }

And this is my log-in component

export class LoginPageComponent implements OnInit {

constructor(private location: Location,
    private route: ActivatedRoute,
    private router: Router,
    private authenticationService: AuthenticationService,
    private alertService: AlertService) {
     }

model: any = {};
loading = false;
returnUrl: string;

error = '';

ngOnInit() {
    // get return url from route parameters or default to '/'
    this.returnUrl = this.route.snapshot.queryParams['main'] || '/';
}

currentUser: User;

login() {
    this.loading = true;
    this.authenticationService.login(this.model.email, this.model.password)
        .subscribe(
        data => {
            this.currentUser = data;
            this.router.navigate([this.returnUrl]);
        },
        error => {
            this.error = "Wrong ID or PW";
            this.loading = false;
        });
}


backClicked() {
    this.location.back();
}
}

And this is my home component

export class MainComponent {

onClick() {
  this.auth.logout() //if user clicks logout button
}

currentUser: User;
users: User[] = [];

items: Object[] = [];

constructor(private authguard: AuthGuard, private auth:AuthenticationService) {
  this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
  console.log(localStorage.getItem('currentUser')); //Printing null
}

}

And the model for user information is this.

export interface User {
birthday: number;
email:string;
genderType:string;
memberType: string;
name: string;
phone: string;

}

What im receiving

Why is it printing null? Thank you!

Answer 1

Mistakes you made

1. passing email and password as URLSearchParams.
2. You are adding all the headers to your login method which is not necessary

The service should contain method as below

    login(body: any, options?: RequestOptionsArgs): Observable<Response> {
            return this.http.post('loginUrl', body);
        }

Component should contain the below code

login() {

    let user ={
    email : this.model.email
    password : this.model.password)
    }
    this.loading = true;
    this.authenticationService.login(user)
        .subscribe(data => {
            this.authenticationService.extractData(data);///call to store token in the localstorage
            this.router.navigate([this.returnUrl]);
        },
        error => {
            this.error = "Wrong ID or PW";
            this.loading = false;
        });
}