Anmelden mit eckigen 4 und PHP-JWT-Tokens

Question

Ich erstelle meine erste Web-App nach einem langen Kurs in Angular 4. Ich benutze Wamp-Server als meine Back-End-Datenbank und die JWT anstelle der Sitzungen.

Ich begann das Anmeldeformular zu schaffen Reactive Formularen:

<div class="row"> 
    <div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4"> 
     <div class="card"> 
      <div class="card-header"> 
       Login 
      </div> 
      <form [formGroup]="loginForm" (ngSubmit)="onSubmit()"> 
       <div class="card-block"> 
        <h4 class="card-title">Username</h4> 
        <input type="text" class="form-control" formControlName="username" name="username" id="username" ngModel required> 
        <h4 class="card-title">Password</h4> 
        <input type="password" class="form-control" formControlName="password" id="password" name="password" ngModel required> 
        <button type="submit" class="btn btn-primary">Login</button> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

Und hier die .ts Skript:

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormControl, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'app-login-component', 
    templateUrl: './login-component.component.html', 
    styleUrls: ['./login-component.component.css'] 
}) 
export class LoginComponentComponent implements OnInit { 

    //Creating a form group 
    loginForm: FormGroup; 


    constructor() { } 

    ngOnInit() { 
    this.initForm(); 
    } 

    //Initializing the form 
    private initForm() 
    { 
    let userName=''; 
    let passWord=''; 

    this.loginForm = new FormGroup({ 
     'username': new FormControl(userName, Validators.required), 
     'password': new FormControl(passWord, Validators.required) 
    }); 
    } 

    //OnSubmit 
    onSubmit(){ 

    //console.log(this.loginForm.value.username); 
    let user = ''; 
    let pass = ''; 

    user = this.loginForm.value.username; 
    pass = this.loginForm.value.password; 
    console.log(user); 

    //http service call 
    //... 
    } 
} 

Dann habe ich einen Dienst in der Datenbank anmelden und die Anmeldeinformationen überprüfen und wenn es korrekt ist, möchte ich auf die/index-Komponente umleiten:

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map' 

@Injectable() 
export class LoggingService { 

    constructor(private http: Http) { } 
    logIn(user: string, pass: string) 
    { 
    return this.http.post('localhost/iamp/login.php', JSON.stringify({user: user, pass: pass})) 
     .map((response: Response)=> { 
      //... 
     }); 
    } 
} 

Eigentlich bin ich steckte jetzt bei diesem Schritt:

.map((response: Response)=> { 
       //... 
}); 

Was ich hier tun kann, kann ich mich nicht einmal erinnern, ob wir es im Laufe genommen haben. Und kann nicht wissen, wie die login.php sein sollte.

Answer 1

Im Service:

return this.http.post('localhost/iamp/login.php', JSON.stringify({user: user, pass: pass})) 
    .map((response: Response)=> { 
     response.json() 
    }); 

In Komponente:

import { Router, ActivatedRoute } from '@angular/router'; 

// ... 
constructor(
    private loginService: LoginService 
    private router: Router 
) { } 
// ... 

authenticateUser(login: string, password: string): void { 
this.loginService.logIn(login, password).subscribe(user => { 
    localStorage.setItem('user', user); 
    this.router.navigateByUrl('index'); 
    } 
}