Может кто-нибудь сказать мне, что я делаю здесь не так

Question

Я пытаюсь создать службу входа в систему, используя люмен для моего бэкэнда. В почтальоне это работает как положено, но когда я пытаюсь отправить данные формы с помощью функции onSubmit, он отвечает с 200, но возвращает html вместо токена API. Любая помощь будет принята с благодарностью.

/* lUMEN API LOGIN CONTROLLER */
<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Validation\ValidationException;
use Illuminate\Support\Facades\Hash;
use App\User;

class LoginController extends Controller
{
    public function login(Request $request)
    {

      $rules = [
          'email' => 'required',
          'password' => 'required'
      ];

        $customMessages = [
           'required' => ':attribute tidak boleh kosong'
      ];
        $this->validate($request, $rules, $customMessages);
         $email    = $request->input('email');
        try {
            $login = User::where('email', $email)->first();
            if ($login) {
                if ($login->count() > 0) {
                    if (Hash::check($request->input('password'), $login->password)) {
                        try {
                            $api_token = sha1($login->id_user.time());

                              $create_token = User::where('id', $login->id_user)->update(['api_token' => $api_token]);
                              $res['status'] = true;
                              $res['message'] = 'Success login';
                              $res['data'] =  $login;
                              $res['api_token'] =  $api_token;

                              return response($res, 200);


                        } catch (\Illuminate\Database\QueryException $ex) {
                            $res['status'] = false;
                            $res['message'] = $ex->getMessage();
                            return response($res, 500);
                        }
                    } else {
                        $res['success'] = false;
                        $res['message'] = 'Username / email / password not found';
                        return response($res, 401);
                    }
                } else {
                    $res['success'] = false;
                    $res['message'] = 'Username / email / password  not found';
                    return response($res, 401);
                }
            } else {
                $res['success'] = false;
                $res['message'] = 'Username / email / password not found';
                return response($res, 401);
            }
        } catch (\Illuminate\Database\QueryException $ex) {
            $res['success'] = false;
            $res['message'] = $ex->getMessage();
            return response($res, 500);
        }
    }
}
/* Angular Login Component */
import { Component, OnInit } from '@angular/core';
import { LoginService } from '../login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less']
})
export class LoginComponent implements OnInit {
  user: any = [ ];
  constructor(private api: LoginService) { }

  ngOnInit() {
  }


onSubmit() {
  this.api.login(this.user).subscribe(
    data => {
      if (false) {
        localStorage.setItem('currentUser', JSON.stringify(this.user));
    } else {
      console.log(this.user);
     }
    },

 );
 }
}
/* Angular login Service*/
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
import { EnvService } from '../services/env.service';
import { catchError, map } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class LoginService {

  constructor(public http: HttpClient,
              public env: EnvService) { }

              login(user) {
                return this.http.post(this.env.LOCAL_ENDPOINT + '/login',  user, {responseType: 'text'});
                  }
            logout() {
                // remove user from local storage to log user out
                localStorage.removeItem('currentUser');
            }
}

<div class="uk-position-center">
  <h1>Login</h1>
  <div clsss="uk-card">
    <div class="uk-card-content">
      <form name="login" (ngSubmit)="onSubmit()">
      <input placeholder="Email" class="uk-input" type="email" name="email" [(ngModel)]="user.email">
      <br/>
      <input placeholder="password" class="uk-input" type="password" name="password" [(ngModel)]="user.password">
      <hr class="uk-divider-icon">
      
      <button style="align-content: center" value="Login" class="btn btn-primary">Login</button>
      </form>
    </div>
  </div>
</div>

Это ответ, который я получаю в браузере, так что я знаю, что я не передаю данные через правильный путь, но я понятия не имею, каков правильный путь

Это ответ, который я хочу показать и сохранить токен API в локальном хранилище.

Сетевая консоль

Answer 1

согласно снимку экрана вашего почтальона, бэкэнд работает, когда вы отправляете данные как параметры запроса, но вы должны отправлять их как данные формы.

login(user){
   let userData = new FormData();
   userData.append('email', user.email);
   userData.append('password', user.password);
   return this.http.post(this.env.LOCAL_ENDPOINT + '/login',userData);
}

Answer 2

Как сказал @Joel, проблема в том, что серверная часть ожидает имя пользователя и пароль в качестве параметров запроса.Вы можете отредактировать свою службу входа в систему следующим образом:

this.http.post( this.env.LOCAL_ENDPOINT + '/login?user=' + user.email + "&password=" + user.password, { responseType: 'text' } );

Однако отправка паролей в виде открытого текста в URL - это очень плохая практика, поэтому я предлагаю вам пересмотреть и вместо этого изменить серверную часть так, чтобы она ожидала имя пользователя ипередать в шапку.