向Angular应用程序传递Slim 3异常响应

Question

我正在创建一个身份验证系统，该系统在后端使用Slim 3 PHP，在前端使用Angular。到目前为止，我已经成功地拥有了它，这样用户就可以在前端填写表格，并向后端发送一个post请求，将数据插入数据库表中。

角度寄存器组件：

this.Auth.postUserDetails(username, password).subscribe(data => {
console.log(data, 'is what we received from the backend:');
});

角度认证服务：

postUserDetails(username, password) {
return this.http.post('/api/achievement-forum-api/src/public/register',
{username, password});
}

但在后端，我有一些表单验证，当密码少于8个字符时，它会产生一些消息，这是一个扩展PHP LogicException类的类的形式。

use Throwable;
class InvalidFormData extends LogicException
{
public function __construct($message = "Password must be at least 8 characters", $code = 0, Throwable $previous = null)
{
parent::__construct($message, $code, $previous);
}
}

当Password类的构造函数中的验证失败时，会抛出此InvalidFormData，该类是对密码进行验证的地方：

public function __construct(string $tainted_password)
{
$cleaned_password = filter_var($tainted_password, FILTER_SANITIZE_STRING);
if ($this->isTooShort($cleaned_password))
throw new InvalidFormData();
$this->password = $cleaned_password;
}

最后，在控制器类中，我们尝试注册一个用户，但如果遇到InvalidFormData异常，我们将提取生成的消息。

public function registerUser($request, $response)
{
$tainted_username = $request->getParsedBody()['username'];
$tainted_password = $request->getParsedBody()['password'];
try
{
$this->authenticationService->registerUser($tainted_username, $tainted_password);
}
catch(InvalidFormData $e)
{
var_dump($e→getMessage()); //shows the message in the browsers console
}
}

问题：

我想做的是将此消息传递回Angular前端，并将其显示在表单上，以便用户能够了解验证失败的原因。

我已经阅读了Slim 3的响应文档，但我不确定我是否必须将此消息作为Slim响应发送回来，如果是，我将如何在Angular中捕获它？我的第一个想法是，我可能需要在angular中发送一个get请求来获取消息，但我相信在原始的post请求中有一种方法可以做到这一点。

我已经阅读了一些Angular文档，似乎我需要在订阅方法中做一些事情，但我真的不确定是什么。

希望有人能给我看一些这个过程的代码示例。我将如何创建一个包含消息的Slim 3响应，以及如何在Angular中捕获此消息？

Answer 1

在src/routes.php:中设置

$app->post( '/api/achievement-forum-api/src/public/register', function( Request $request, Response $response, array $args ) {
$body = $request->getParsedBody();
// probably $body = [ "username" => "user name", "password" => "pass word" ]
/* Do validation stuff here */
/* Depending of your validation results, set $status = something like 0 or 1... */
/* Depengind of your $status, set $message = "string to be displayed" */
/* Need to return data? $data = [ ... ] */
return $response->withJson( [ "status" => $status, "message" => $message, "data" => $data ] );
} );

响应布局的灵感来源于Instagram API(https://www.instagram.com/developer/endpoints/)

我已经好几年没有和Angular联系了，但我认为你必须做一些类似postUserDetails( params, here ).map(res=> res.json())或你正在使用的Angular版本中的另一个"responseHandler"方法。

我习惯用fetch API(https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch)或axios(https://github.com/axios/axios)在我的项目