Angular-11如何从RESTful API获取自定义登录错误消息并在前端展示

这个问题的核心在于Angular HttpClient对HTTP错误响应的封装逻辑——当请求返回错误状态码（比如400、401这类非2xx状态）时，后端返回的自定义错误数据并不会直接存放在error.message里，而是被包裹在error.error属性中。你当前用error.message拿到的是Angular自动生成的通用错误文本（比如"Internal Server Error"），而非后端返回的自定义提示。

修改方案 #

只需要调整错误回调里的逻辑，优先从后端返回的响应体中提取自定义消息，同时做兜底处理应对各种异常情况：

return this.api.post('login', data, headers)
  .pipe(first())
  .subscribe(
    data => {
      this.tokenHandler(data);
    },
    error => {
      // 优先获取后端自定义错误消息，逐步兜底避免报错
      const errorMessage = error.error?.message || error.message || '登录失败，请稍后重试';
      this.toastr.error(errorMessage);
      this.isLoading = false;
    });

逻辑说明 #

• error.error：这是Angular HttpClient专门存储后端错误响应体的字段，对应你后端返回的{"success": false, "message": "Email is Required!"}对象；
• error.error?.message：用可选链操作符?.避免后端未返回message属性时出现运行时错误；
• 后续的error.message和兜底文本：用来处理网络错误、后端未返回错误消息等边缘情况，保证用户始终能看到友好提示。

额外提示 #

请确保你的后端在返回错误时，同步返回正确的HTTP状态码（比如参数缺失用400，权限不足用401），这样Angular才会触发error回调。如果后端错误时仍返回200状态码，请求会进入next回调，你需要在data的处理逻辑里判断success字段来处理错误场景。

内容的提问来源于stack exchange，提问作者user11352561