Я хочу передать данные из пользовательского интерфейса (Angular) в API (ASP .NET Core)

Вопрос или проблема

onSubmit() {
    console.log(this.loginform.value);
    var url="Auth/Login";
    this.Service.post(url,this.loginform.value).subscribe((user:any) => {
        if(user.status = true) {
            this.route.navigate(["/dashboard"]);
        }
        else {
        
        }
    });
}

[HttpPost("Login")]
public IActionResult Login([FromBody] User login)
{
     if(login == null || String.IsNullOrEmpty(login.username) || String.IsNullOrEmpty(login.password))
     {
         return BadRequest("Требуются адрес электронной почты и пароль");
     }

     var user = AuthenticateLogin(login);

     if (user != null)
     {
         // Генерация JWT токена
         var token = GenerateToken(user);
         return Ok(new
         {
             message = "Успешный вход в систему",
             token = token
         });
     }
     else
     {
         return Unauthorized(new { message = "Неверные учетные данные" });
     }
}

private Login AuthenticateLogin([FromBody]User Logindetails)
{
    var Loginuser = _context.Login.FirstOrDefault(a => a.Email == Logindetails.username);

    if(Loginuser != null)
    {
        if(Loginuser.password == Logindetails.password)
        {
            return new Login
            {
                Email = Loginuser.Email
            };
        }
    }

     return null;
} 

Ответ или решение

Передача данных от UI (Angular) к API (ASP.NET Core)

В данной статье мы рассмотрим проблему, с которой вы столкнулись при попытке передачи данных о пользователе (имя пользователя и пароль) от пользовательского интерфейса Angular к API на ASP.NET Core. Мы разберемся в том, как исправить данную проблему, а также почему данные, введенные в UI, не передаются, хотя в Swagger всё работает корректно.

Проблема

Из вашего кода видно, что вы отправляете данные с формы входа в метод Login вашего API, однако, данные не достигают сервера. Вместо этого вы получаете ошибку "unknown error". Возможно, это вызвано неправильной конфигурацией вашей отправки данных или проблемой с сериализацией.

Разбор кода Angular

Ваш метод onSubmit() выглядит следующим образом:

onSubmit() {
    console.log(this.loginform.value);
    var url = "Auth/Login";
    this.Service.post(url, this.loginform.value).subscribe((user:any) => {
        if(user.status = true) {
            this.route.navigate(["/dashboard"]);
        } else {
            // обработка ошибки
        }
    });
}

Возможные проблемы:

1. Неправильная проверка статуса ответа: В условии if(user.status = true) вы используете оператор присваивания (=) вместо оператора сравнения (===). Это может привести к нежелательному поведению. Исправьте это на if(user.status === true).

2. Необработанная ошибка: Если сервер возвращает ошибку, она может не обрабатываться должным образом. Рекомендуется добавить error в подписку на subscribe, чтобы вы могли видеть, что именно происходит при возникновении ошибки.

Обработка Response API

Ваш метод API выглядит следующим образом:

[HttpPost("Login")]
public IActionResult Login([FromBody] User login)
{
    if(login == null || String.IsNullOrEmpty(login.username) || String.IsNullOrEmpty(login.password))
    {
        return BadRequest("Email and Password is Required");
    }

    var user = AuthenticateLogin(login);

    if (user != null)
    {
        var token = GenerateToken(user);
        return Ok(new
        {
            message = "Logged In Successfully",
            token = token
        });
    }
    else
    {
        return Unauthorized(new { message = "Invalid Credentials" });
    }
}

Возможные проблемы:

1. Проблемы с сериализацией: Убедитесь, что структура объекта, отправляемого из Angular, соответствует структуре объекта User, принимаемого в методе API. Например, убедитесь, что у вас есть правильные ключи: username и password. Проверьте, отправляются ли ваши данные в формате JSON.

2. Атрибут [FromBody]: Убедитесь, что ваше API настроено на прием данных из тела запроса. Возможно, понадобится установить правильный заголовок Content-Type, чтобы указать, что данные в формате JSON. Например, вы можете использовать:

this.Service.post(url, this.loginform.value, { headers: { 'Content-Type': 'application/json' }}).subscribe(...)

Проверка Swagger

Если API работает через Swagger, это говорит о том, что конфигурация сервера корректна, но проблема, скорее всего, в методе отправки данных из Angular. Убедитесь, что:

• В Swagger вы передаете данные в том формате, который ожидает ваш API.
• Запросы из Angular и Swagger отправляются к одному и тому же URL-адресу и с одинаковыми данными.

Рекомендации по отладке

1. Логи: Убедитесь, что у вас настроены логи для отслеживания запросов к API. Это поможет увидеть, что именно приходит на сервер.
2. Проверка данных в консоли: Используйте console.log(this.loginform.value) перед отправкой запроса, чтобы увидеть, какие данные вы действительно отправляете.
3. Формат данных: Убедитесь, что данные сериализуются в формате JSON и передаются корректно.

Заключение

Работа с данными от UI (Angular) к API (ASP.NET Core) требует тщательной проверки и правильной отправки данных. Обратите внимание на приведенные рекомендации и исправления, чтобы устранить возникшую проблему. Правильная настройка и обработка ошибок помогут вам достичь успешного взаимодействия между клиентом и сервером.