将 Slim 3 异常响应传递给 Angular 应用程序答案

【问题标题】：Passing a Slim 3 Exception response to an Angular application将 Slim 3 异常响应传递给 Angular 应用程序
【发布时间】：2019-11-07 11:06:37
【问题描述】：

我正在创建一个身份验证系统，它在后端使用 Slim 3 PHP，在前端使用 Angular。到目前为止，我已经设法让用户可以在前端填写表单并向后端发送发布请求以将该数据插入到数据库表中。

角度注册组件：

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

Angular 身份验证服务：

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 文档，似乎我需要在 subscribe 方法中做一些事情，但我不确定是什么。

希望有人可以向我展示此过程的一些代码示例。我将如何创建包含消息的 Slim 3 响应以及如何在 Angular 中捕获它？

【问题讨论】：

标签： php angular validation response slim-3

【解决方案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)

【讨论】：