reactjs - Symfony 400 错误必须提供密钥“电子邮件”

Question

以下是security.yaml

    providers:
    # used to reload user from session & other features (e.g. switch_user)
    app_user_provider:
        entity:
            class: App\Entity\User
            property: email
firewalls:
    dev:
        pattern: ^/(_(profiler|wdt)|css|images|js)/
        security: false
    main:
        anonymous: true
        # provider: app_user_provider
        json_login:
            check_path: app_login
            username_path: email
            password_path: password

它旨在仅使用电子邮件和密码接收 POST JSON 用于登录

以下是我的 React 组件：

import React, {Component} from 'react';
import ReactDom from "react-dom";
import '../css/app.scss';
import 'bootstrap';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

export class Login extends Component {
    constructor(props){
        super(props);
        this.state={
            email:'',
            password:''
        }
    }

    handleClick(event) {
        console.log(event);
        fetch('/login', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                email: this.state.email,
                password: this.state.password,
            })
        })
    }

    render() {
        return (
            <div className="container">
                <div>
                    <TextField
                        type="email"
                        hinttext="Enter your email"
                        floatinglabeltext="email"
                        onChange = {(event,newValue) => this.setState({email:newValue})}
                    />
                    <br/>
                    <TextField
                        type="password"
                        hinttext="Enter your Password"
                        floatinglabeltext="Password"
                        onChange = {(event,newValue) => this.setState({password:newValue})}
                    />
                    <br/>
                    <Button label="Submit" onClick={(event) => this.handleClick(event)}>
                        Submit
                    </Button>
                </div>
            </div>
        );
    }
}

ReactDom.render(<Login />, document.getElementById('Login'));

以下是我的安全控制器：

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;

class SecurityController extends AbstractController
{
    /**
     * @Route("/login", name="app_login", methods={"POST"})
     */
    public function login()
    {
        return $this->json([
            'user' => $this->getUser() ? $this->getUser()->getId() : null]
        );
    }
}

尽管这只是一个返回/响应，但我尝试将其更改为以下内容，但结果仍然相同：

 'email' => $this->getEmail() ? $this->getEmail()->getId() : null]

正如主题/标题所述，我收到 400 错误 - 必须提供密钥“电子邮件”

在 Params 选项卡下，它只显示单词“JSON”

我不明白为什么这不起作用。我可以理解身份验证错误，但我正在发送电子邮件

像往常一样，提前谢谢

标签： reactjssymfony

Answer 1

所以我使用 event.currentTarget.value 将我的 onChange 更改为 setState，它发送了一个带有键“email”的 JSON

我可以通过为 newValue 做一个控制台日志来发现这一点 - 查看以前版本的代码 - 当它为空时，我知道这是我必须改变的

import React, {Component} from 'react';
import ReactDom from "react-dom";
import '../css/app.scss';
import 'bootstrap';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

export class Login extends Component {
    constructor(props){
        super(props);
        this.state={
            email:'',
            password:''
        }
    }

    handleClick(event) {
        console.log(event);

        fetch('/login', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                'email' : this.state.email,
                'password' : this.state.password
            })
        })
    }

    render() {
        return (
            <div className="container">
                <div>
                    <TextField
                        type="email"
                        hinttext="Enter your email"
                        floatinglabeltext="email"
                        onChange = {(event) => this.setState({email:event.currentTarget.value})}
                    />
                    <br/>
                    <TextField
                        type="password"
                        hinttext="Enter your Password"
                        floatinglabeltext="Password"
                        onChange = {(event) => this.setState({password:event.currentTarget.value})}
                    />
                    <br/>
                    <Button label="Submit" onClick={(event) => this.handleClick(event)}>
                        Submit
                    </Button>
                </div>
            </div>
        );
    }
}

ReactDom.render(<Login />, document.getElementById('Login'));