Strapi 登录/注册和身份验证

Question

伙计们，我有一个特殊的问题。 在使用strapi（第一个计时器）时，我正在尝试设置登录和注册，但我一直遇到同样的错误，直到我使用了文档中的确切代码示例，即使这样它也只能在一个条件下工作。

当我这样做时，它会起作用。 那是我对标识符和密码进行硬编码的时候。 它有效，我得到了 jwt。

 function fetchLogin(){
        await axios
                .post(url, {
                    identifier: "user",
                    password: "123456"
                })
                .then((response) => {
                    // Handle success.
                    console.log('Well done!');
                    console.log('User profile', response.data.user);
                    setUser(response.data.user)
                    console.log('User token', response.data.jwt);
                    setUserToken(response.data.jwt)
                })
                .catch((error) => {
                    // Handle error.
                    console.log('An error occurred:', error.response);
                    setLoginError(error.response)
                }); 
    }

但是我使用了客户端的输入字段，并且我收集了正确的数据，但我得到了一个错误。 这里。

function fetchLogin(data){
        console.log(data)
        await axios
                .post(url, {
                    data
                })
                .then((response) => {
                    // Handle success.
                    console.log('Well done!');
                    console.log('User profile', response.data.user);
                    setUser(response.data.user)
                    console.log('User token', response.data.jwt);
                    setUserToken(response.data.jwt)
                })
                .catch((error) => {
                    // Handle error.
                    console.log('An error occurred:', error.response);
                    setLoginError(error.response)
                }); 
    }
//Heres the function that collects the input
const LoginSubmit = (e) =>{
        e.preventDefault()
        const data = {
            identifier: login.email,
            password: login.password 
        }
        const details = JSON.stringify(data)
        fetchLogin(details)
    }
// useState
const [login, setLogin]  = useState({
        email: '',
        password: ""
    })
// input fields
<div className="input-group input-group-sm mb-3">
                                        <span className="input-group-text" id="inputGroup-sizing-sm">Password</span>
                                        <input type="password" className="form-control"
                                         aria-label="Sizing example input" 
                                         value={login.password} 
                                         onChange={(e)=> setLogin({...login, password: e.target.value})}
                                         aria-describedby="inputGroup-sizing-sm"/>
                                    </div>

当我将数据记录到控制台时，一切都会检查，但我收到验证错误

 POST http://localhost:1337/api/auth/local 400 (Bad Request)
An error occurred: {data: {…}, status: 400, statusText: 'Bad Request', headers: {…}, config: {…}, …}

//the error message
errors: Array(2)
0: {path: Array(1), message: 'identifier is a required field', name: 'ValidationError'}
1: {path: Array(1), message: 'password is a required field', name: 'ValidationError'}

我做错了什么？

Answer 1

调用fetchLogin并使用扩展运算符时，应删除Json.Stringfy中的 Json.Stringfy。 请求正文必须是{id:"", password:""} ，不像{data: "{id:"",password:""}"}

所以应该使用扩展运算符{...} ，它会解包对象/数组的元素

前任：

const data = {name:"foo"}
const newData = {
    ...data,
    color: 'black'
};
//newData is {name: "foo",color:'black'};

解决方案：

//data is {identifier: "user",password: "123456"}  
function fetchLogin(data){
    await axios.post(url, { ...data })

平等的：

function fetchLogin(data){
        await axios.post(url, {identifier: "user",password: "123456"})