Angular 5 aut get get token

Question

Я работаю над аутентификацией пользователя приложения Angular5, маркер возврата API при успешном входе в систему. По некоторым причинам LoginPageComponent не знает, что такое токен, даже если я сохраню его в локальном хранилище, я все равно получу ноль.

Что делать?

Структура приложения: 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

Ваш вызов signinUser вызывает асинхронный код, поэтому часть then Обещания в signinUser не будет выполнена до того, как вы сделаете вызов console.log в onSubmit.

Если вы измените свой метод signinUser в AuthService для возврата Обещания, то вы можете просто соединить вызов .then в своем методе LoginPageComponent.onSubmit:

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());
    });
}