谁能告诉我这里我做错了什么

Question

我正在尝试使用流明为我的后端进行登录服务。在postman中，它按预期工作，但是当我尝试使用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>

This is the response I get in the browser so I know that im not passing the data through the wright way but I have no idea what the correct way is

这是我想要显示的响应并将api令牌保存在本地存储中

网络控制台

Answer 1

就像@Joel所说，问题是后端需要用户名和密码作为查询参数。您可以像这样编辑您的登录服务：

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

但是，在URL中以明文形式发送密码是非常糟糕的做法，因此我建议您重新考虑，而是更改后端，以便它需要用户名并传入标题。

Answer 2

根据您的邮递员屏幕截图，当您将数据作为查询参数发送时后端工作，但您应该将其作为表单数据发送。

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