使用angular 4和PHP-JWT令牌登錄

Question

我在Angular 4的漫長課程之後創建了我的第一個Web應用程序。我將wamp服務器用作我的後端數據庫和JWT而不是會話。

我開始利用反應形式創建登錄表單：

<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> 

而這裏的.ts腳本：

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 
    //... 
    } 
} 

然後，我創建了一個服務登錄到數據庫並檢查證書如果它是正確的，我想重定向到/ index組件：

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)=> { 
      //... 
     }); 
    } 
} 

其實我是現在卡在這一步：

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

在這裏做什麼，我甚至不記得，如果我們把它在課程中。無法知道login.php應該如何。

Answer 1

在服務：

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

在組件：

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