Соединение JWT между Angular 6 и Laravel 5.7

Question

Я новичок в Angular и Laravel. Так что, если я глуп, просто скажи это;)

Я создал форму входа в Angular и метод аутентификации в Laravel. Я проверил Laravel API с Почтальоном, и это сработало. Аутентификация, регистрация, получение и использование JWT.

Но мое приложение Angular, похоже, не отправляет правильный запрос в Laravel. К сожалению, я не знаю, как отобразить запрос на отправку в Angular или в Laravel.

Возвращает JSON:

POST http://localhost:8000/api/login 400 (Bad Request)
error: "invalid_credentials"

Я получаю этот возврат каждый раз, даже если я введу правильные учетные данные.

Это метод аутентификации в Laravel:

public function authenticate(Request $request)
{
    $credentials = $request->only('email', 'password');

    try {
        if (! $token = JWTAuth::attempt($credentials)) {
            return response()->json(['error' => 'invalid_credentials'], 400);
        }
    } catch (JWTException $e) {
        return response()->json(['error' => 'could_not_create_token'], 500);
    }

    return response()->json(compact('token'));
}

Это auth.service.ts в Angular:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class AuthService {
  constructor(private http: HttpClient) {
  }

  login(credentials) {
   return this.http.post('http://localhost:8000/api/login', JSON.stringify(credentials));
  }

  logout() {
  }

  isLoggedIn() {
    return false;
  }
}

И login.component.ts:

import { AuthService } from './../services/auth.service';
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
    invalidLogin: boolean;
    constructor(
        private router: Router,
        private authService: AuthService) { }

    signIn(credentials) {
        //let request = '?email=' + credentials['email'] + '&password=' + credentials['password'];
        let request = credentials;
        this.authService.login(request).subscribe(result => {
            if (result) {
              this.router.navigate(['/']);
            } else {
                this.invalidLogin = true;
            }
        });
    }
}

А вот форма входа login.component.html

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-4">
            <form #loginf="ngForm" (ngSubmit)="signIn(loginf.value.login)">
                <div ngModelGroup="login" #login="ngModelGroup">
                    <div class="alert alert-danger animated bounceIn delay-2s" *ngIf="email.touched && password.touched && (!login.valid)">
                        Die eingegeben Daten sind nicht korrekt.
                    </div>
                    <div *ngIf="invalidLogin" class="alert alert-danger">Invalid username and/or password.</div>
                    <div class="form-group">
                        <input required ngModel ng-model="email.text" name="email" type="email" class="form-control" #email="ngModel" placeholder="E-Mail">
                    </div>
                    <div class="form-group">
                        <input required ngModel name="password" type="password" class="form-control" #password="ngModel" placeholder="Passwort">
                    </div>
                    <p>
                        <a>Passwort vergessen</a>
                        <a>Ich brauche Hilfe vom Kunden-Support</a>
                    </p>
                    <button class="btn btn-primary" [disabled]="!loginf.valid">LOGIN</button>
                </div>
            </form>
        </div>
    </div>
</div>