C# Проверка входа в WebApi

Question

Я использую React Js в качестве моего интерфейса и C# WebApi с моим сервером. Я пытаюсь использовать токен на своем бэкэнде.

Вот мой код:

Реакция JS

Логин JS

import React, { Component } from 'react';
import './App.css';
import logo from './logo.svg';
import {Button, Card, CardBody, CardGroup, Col, Container, Form, Input, InputGroup, Row} from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import axios from 'axios';

class Login extends Component{
  constructor(){
    super();

    this.state = {
      UserRole: '',
      UserName: '',
      UserPassword: '',
    }

    this.UserPassword = this.UserPassword.bind(this);
    this.UserName = this.UserName.bind(this);
    this.Login = this.Login.bind(this);
  }

  UserName(event) {
    this.setState ({ UserName: event.target.value})
  }

  UserPassword(event){
    this.setState ({ UserPassword: event.target.value})
  }

  Login(event){
    debugger;
    axios.post('http://localhost:60111/Api/login', {
      UserName: this.state.UserName,
      UserPassword: this.state.UserPassword})
    .then(result => {
      if(result.data.Status === 'Success'){
        console.log(result.data.Status);
        alert("User login Successfully");
        this.props.history.push("/Dashboard");
      }else
      {
        alert('Invalid User');
        this.props.history.push('/Login');
      }
      debugger;
    })
  }

Итак, как вы можете видеть здесь, я пытаюсь передать мои UserName и UserPassword моему бэкэнду C# WebApi.

Однако на моем C# WebApi контроллере входа я пытаюсь выполнить действие проверки, как показано ниже:

namespace mylogin.Controllers
{
    [RoutePrefix("Api")]
    public class LoginController : ApiController
    {
        DBSecurityTestEntities DBSE = new DBSecurityTestEntities();
        [Route("login")]
        [HttpPost]
        public HttpResponseMessage Login(User user)
        //public object Login(User user)
        {
            bool status = false;

            using (DBSE)
            {
                var obj = DBSE.UserLogins.Where(x => x.UserName.Equals(user.UserName) && x.UserPassword.Equals(user.UserPassword)).FirstOrDefault();
                if (obj != null)
                //UserLogin ul = new UserLogin();
                //if (user.UserName == ul.UserName && user.UserPassword == ul.UserPassword)
                {
                    status = true;
                }
                else
                {
                    status = false;
                }
            }

            if (status == true)
            {
                //do something here... perform login and send token
            }
}

Однако то, как я это объявляю, привело к ошибке. Я попытался установить точку останова и проверил значение здесь

Так что, похоже, мои данные были успешно переданы из внешнего интерфейса, однако мой C# WebApi не может выполнить проверку (так как мой obj равен null).

Может ли кто-нибудь указать на мою ошибку или упущение?

Answer 1

После того, как я настроил Login.js в React , я успешно передал свои данные в мой C# Backend

Login. js

import React, { Component } from 'react';
import {Button, Card, CardBody, CardGroup, Col, Container, Form, Input, InputGroup, Row} from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import axios from 'axios';

class Login extends Component{
  constructor(){
    super();

    this.state = {
      UserRole: '',
      UserName: '',
      Password: '',
    }

    this.Password = this.Password.bind(this);
    this.UserName = this.UserName.bind(this);
    this.Login = this.Login.bind(this);
  }


  UserName(event) {
    this.setState ({ UserName: event.target.value})
  }

  Password(event){
    this.setState ({ Password: event.target.value})
  }

  Login(event){
    debugger;
    axios.post('http://localhost:60111/Api/login', {
      UserName: this.state.UserName,
      Password: this.state.Password})
    .then(result => {
      if(result.data.Status === 'Success'){
        console.log(result.data.Status);
        alert("User login Successfully");
        this.props.history.push("/");
      }else
      {
        alert('Invalid User');
        this.props.history.push('/Login');
      }
      debugger;
    })
  }

  render() {
    return(
      <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="9" lg="7" xl="6">
              <CardGroup>
                <Card className="p-2">
                  <CardBody>
                    <Form>
                      <div className="mb-2 pageheading">
                          Login
                      </div>
                      <InputGroup className="mb-3">
                        <Input type="text" onChange={this.UserName} placeholder="Enter UserName" />
                      </InputGroup>
                      <InputGroup className="mb-4">
                        <Input type="password" onChange={this.Password} placeholder="Enter Password" />
                      </InputGroup>
                    <Button onClick={this.Login} color="success" block>Login</Button>
                    </Form>
                  </CardBody>
                </Card>
              </CardGroup>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }

}

export default Login;

Оказывается, это мой Атрибут Ошибка именования: UserPassword должно быть Пароль