Я пытаюсь обрабатывать ошибки с аутентификацией пользователя, и когда пользователь регистрирует новую учетную запись, но имя пользователя уже существует, он должен выдать ошибку 400 Bad request.
Итак, это мой метод регистрации в AuthController.cs
:
public async Task<IActionResult>Register(UserForRegisterDto
userForRegisterDto)
{
userForRegisterDto.username = userForRegisterDto.username.ToLower();
if(await _repo.UserExists(userForRegisterDto.username))
{
return BadRequest("Username already exists !");
}
var userToCreate = new User
{
Username = userForRegisterDto.username
};
var createdUser = await _repo.Register(userToCreate,
userForRegisterDto.password);
return StatusCode(201);
}
В register.component.ts
:
export class RegisterComponent implements OnInit {
@Output() cancelRegister = new EventEmitter();
model: any = {};
constructor(private authService: AuthService) { }
ngOnInit() {}
register() {
this.authService.register(this.model).subscribe(() => {
console.log('create successed');
}, error => {
console.log(error);
});
}
cancel() {
this.cancelRegister.emit(false);
console.log('canceled');
}
}
В register.component.html
:
<form #registerForm="ngForm" (ngSubmit)="register()">
<h2 class="text-center text-primary">Sign Up</h2>
<hr>
<div class="form-group">
<input type="text" class="form-control" required name="username"
[(ngModel)]="model.username" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" required name="password"
[(ngModel)]="model.password" placeholder="Password">
</div>
<div class="form-group text-center">
<button class="btn btn-success" type="submit">Register</button>
<button class="btn btn-default" type="button"
(click)="cancel()">Cancel</button>
</div>
</form>
Чтобы отправить ошибку из внешнего интерфейса, я создал Exceptions.cs
, который будет содержать ошибку в заголовке API выборки:
public static class Exceptions
{
public static void AddApplicationError(this HttpResponse response,
string message)
{
response.Headers.Add("Application-Error", message);
response.Headers.Add("Access-Control-Expose-Headers",
"Application-Error");
response.Headers.Add("Access-Control-Allow-Origin", "*");
}
}
Чтобы отловить ошибки, я создал error.interceptor.ts, который будет обрабатывать ошибки, отправленные из бэкэнда:
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
return next.handle(req).pipe(
catchError(error => {
if (error instanceof HttpErrorResponse) {
const applicationError = error.headers.get('Application-Error');
if (applicationError) {
console.error(applicationError);
return throwError(applicationError);
}
const serverError = error.error.errors;
let modalStateErrors = '';
if (serverError && typeof serverError === 'object' ) {
for (const key in serverError) {
if (serverError[key]) {
modalStateErrors += serverError[key] + `\n`;
}
}
}
return throwError(modalStateErrors || serverError || 'Server Error');
}
})
);
}
}
//add this method to provider in app.module.ts to get everything work
export const ErrorProvider = {
provide: HTTP_INTERCEPTORS,
useClass: ErrorInterceptor,
multi: true
};
serverError
будет содержать все исключения, а метод регистрации в компоненте регистра будет отображать ошибки на консоли, все работает так, как я ожидал, за исключением запроса 400 Bad, определенного в методе регистрации в AuthController
. Теперь он возвращает "Ошибка сервера", но я ожидал, что "Имя пользователя уже существует!"
Я использую .net-core 2.2 и совершенно новичок в angular. Буду признателен за любую идею, которая поможет мне решить эту проблему :-)
1 ответ
После доработки кода
Проблема была в interceptor
из-за оператора return, и она была решена с помощью:
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
return next.handle(req).pipe(
catchError(error => {
if (error instanceof HttpErrorResponse) {
const applicationError = error.headers.get('Application-Error');
if (applicationError) {
console.error(applicationError);
return throwError(applicationError);
}
const serverError = error.error.errors;
let modalStateErrors = '';
if (serverError && typeof serverError === 'object' ) {
for (const key in serverError) {
if (serverError[key]) {
modalStateErrors += serverError[key] + `\n`;
}
}
}
return throwError(modalStateErrors || serverError || error.error );
}
})
);
}
}
Похожие вопросы
Новые вопросы
angular
Вопросы по Angular (не путать с AngularJS), веб-фреймворку от Google. Используйте этот тег для угловых вопросов, которые не относятся к конкретной версии. Для более старой веб-платформы AngularJS (1.x) используйте тег angularjs.