#angular #lumen
#угловатый #lumen
Вопрос:
Я пытаюсь создать службу входа в систему, используя lumen для моего бэкэнда. В postman это работает как ожидалось, но когда я пытаюсь отправить данные формы с помощью onSubmit функции, она отвечает 200, но возвращает html вместо токена api. Любая помощь будет высоко оценена.
/* lUMEN API LOGIN CONTROLLER */
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use IlluminateValidationValidationException;
use IlluminateSupportFacadesHash;
use AppUser;
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 (IlluminateDatabaseQueryException $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 (IlluminateDatabaseQueryException $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> Это ответ, который я получаю в браузере, поэтому я знаю, что я не передаю данные через wright way, но я понятия не имею, каков правильный способ
Это ответ, который я хочу показать и сохранить токен api в локальном хранилище 
Сетевая консоль 
Комментарии:
1. вы проверили, правильно ли вы отправляете данные на сервер, проверьте свою сетевую консоль
2. похоже, вы отправляете имя пользователя и пароль как formdata вместо того, чтобы передавать его как параметр запроса.
3. Я обновил его, чтобы показать сетевую консоль, но я не думаю, что отправляю данные правильно, но я не знаю, каким способом я могу это сделать, я просмотрел видео http-клиента, и все еще это не работает
4. в postman проверьте, работает ли серверная часть, если данные отправляются в форме data или json вместо параметра запроса, вы передаете данные в URL, что не очень хорошо
5. В postman он возвращается в формате json
Ответ №1:
Как сказал @Joel, проблема в том, что серверная часть ожидает имя пользователя и пароль в качестве параметров запроса. Вы можете отредактировать свою службу входа в систему следующим образом:
this.http.post( this.env.LOCAL_ENDPOINT '/login?user=' user.email "amp;password=" user.password, { responseType: 'text' } );
Однако отправка паролей в виде открытого текста в URL-адресе — очень плохая практика, поэтому я предлагаю вам пересмотреть и вместо этого изменить серверную часть так, чтобы она ожидала имя пользователя и пароль в заголовке.
Комментарии:
1. Как бы я передал это в заголовке
2. Вы можете увидеть очень хорошее руководство на официальном сайте angular здесь: angular.io/guide/http#adding-headers . Однако я не знаю, как вы можете изменить свой бэкэнд для этого. Мой совет был бы найти руководство, в котором объясняется, как выполнить весь процесс входа в систему, как во внешнем интерфейсе, так и на серверной части. Если вы этого не сделаете, очень вероятно, что в конечном итоге вы столкнетесь с уязвимостями в системе безопасности.
Ответ №2:
согласно вашему снимку экрана postman, серверная часть работает, когда вы отправляете данные в виде параметра запроса, но вместо этого вы должны отправлять их в виде данных формы.
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);
}