Angular 5 auth get token - angular5

Question

I am working on Angular5 app user authentication, api return token on successful login. For some reasons LoginPageComponent has no idea what is the token, even if I store it in localstorage I will still get null.
What to do?
App Structure:
LoginPageComponent
import { Component, ViewChild } from '#angular/core';
import { NgForm } from '#angular/forms';
import { Router, ActivatedRoute } from "#angular/router";
import { AuthService } from '../../../shared/auth/auth.service';
#Component({
selector: 'app-login-page',
templateUrl: './login-page.component.html',
styleUrls: ['./login-page.component.scss']
})
export class LoginPageComponent {
#ViewChild('f') loginForm: NgForm;
private user: any = {
email: '',
password: ''
};
constructor(
private auth: AuthService,
private router: Router,
private route: ActivatedRoute) { }
// On submit button click
onSubmit(f: NgForm) {
this.auth.signinUser(f.value.email, f.value.password);
// Returns even signinUser has token
console.log(this.auth.getToken());
}
}
AuthService
signinUser(email: string, password: string) {
this.userService.login(email, password).then(res => {
console.log(res);
this.token = res.token;
// here app has token and this.token contains value
});
}
getToken() {
return this.token;
}
UserService:
login(email, password) {
this.endpoint = this.endpointLocal + '/api/auth/login';
return new Promise(resolve => {
this.http.post(this.endpoint, {"email": email, "password": password})
.subscribe(res => resolve(res.json()));
});
}

Answer 1

Your call to signinUser invokes asynchronous code, so the then portion of the Promise in signinUser won't have been executed before you make your console.log call in onSubmit.
If you modify your signinUser method in the AuthService to return the Promise, then you can just chain a .then call in your LoginPageComponent.onSubmit method:
signinUser(email: string, password: string): Promise {
return this.userService.login(email, password).then(res => {
console.log(res);
this.token = res.token;
// here app has token and this.token contains value
});
}
// On submit button click
onSubmit(f: NgForm) {
this.auth.signinUser(f.value.email, f.value.password).then(() => {
console.log(this.auth.getToken());
});
}