如何在 Angular 中显示来自后端的异常？

Question

我正在使用 Angular 在 .Net6 中准备 WebAPI。当我准备注册页面时，我将电子邮件设置为唯一（它是用户名凭据）。现在，我想证明当用户尝试使用已使用的电子邮件进行注册时，电子邮件不是唯一的。 DB中的email列被设置为唯一的，但我不知道如何在前端处理来自后端的错误。用户必须以某种方式知道他在注册过程中做错了什么。当我在数据库中找到提供的电子邮件时，我抛出了一个异常。也许我应该以另一种方式做到这一点？给点提示:) 报名方式

public void RegisterUser(UserRegister dto)
        {
            var newUser = new User()
            {
                Email = dto.Email,
                RoleId = dto.RoleId,
                FirstName = dto.FirstName,
                LastName = dto.LastName,
                DateOfBirth = dto.DateOfBirth,
                Nationality = dto.Nationality,
            
            };
            
            if(_dataContext.Users.Where(m => m.Email == newUser.Email).Any())
            { 
                throw new BadRequestException("Email exists"); 
            }

            var hashedPassword = _passwordHasher.HashPassword(newUser, dto.Password);

            newUser.PasswordHash = hashedPassword;
            _dataContext.Users.Add(newUser);
            _dataContext.SaveChanges();
        }

负责注册的组件

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Form, NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import { User } from '../models/user';
import { UserService } from '../services/user.service';


@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

  constructor(private http: HttpClient, 
    private userService: UserService,
    private router: Router) { }

  userRegisteredSuccessfully : boolean = false;

  public countries:any = countries
  
    ngOnInit(): void {
      this.userRegisteredSuccessfully = false

  }

  

  onSubmit(f: NgForm){
    this.userService.registerUser(f.value).subscribe(
      res =>{
        var showRegisteredSuccess = document.getElementById('register-success-alert');
        if (showRegisteredSuccess) {
          showRegisteredSuccess.style.display = "block";
        }
        setTimeout(function () {
          if (showRegisteredSuccess) {
            showRegisteredSuccess.style.display = "none";
          }
        }, 4000);
      },
      err => {
        //What do do here ? 
      }  
    );
  }

}

Answer 1

这是一个非常适合每个应用程序的自定义功能。这取决于：

BE 将发送什么错误。
您想向用户公开哪些错误。（并非所有错误都应该为 FE 明确显示）
是否翻译错误信息。

我建议以团队的形式讨论这一切。如果它是一个宠物项目，那么您可以尝试 angular snack bars 或其他可用的 toast 组件类型。

onSubmit(f: NgForm){
    this.userService.registerUser(f.value).subscribe(
      res =>{
        var showRegisteredSuccess = document.getElementById('register-success-alert');
        if (showRegisteredSuccess) {
          showRegisteredSuccess.style.display = "block";
        }
        setTimeout(function () {
          if (showRegisteredSuccess) {
            showRegisteredSuccess.style.display = "none";
          }
        }, 4000);
      },
      err => {
        const errMsg = ERROR_CODES[err.status] || 'ServerError';
        this._snackBar.open(errMsg , 'Ok');
      }  
    );
  }

error.constants.ts

export const ERROR_CODES = {
   "E1001": "UserExist",
   "E1002" : "BlaBla"
}

示例here

Answer 2

您可以在 dotnet api 中编写自定义异常中间件，如 link 中所述。实施此中间件后，您可以从客户端捕获所有错误，然后将其显示给用户以供参考。

如何在 Angular 中显示来自后端的异常？

How to display exception from backend in Angular?

.net

error-handling

exception

angular