在 React 中设置登录认证系统时如何解决这个错误？

Question

拜托，我需要一组专家的眼睛来快速了解这些：

如果错误没有出现会怎样

标题：

身体：

登录页面将收集用户的 gmail 和密码，将其发送到登录 url 并获取包含授权令牌的对象将被返回。完美适用于邮递员。

内部 vscode :

这是处理授权的功能：

  const [loginInput, setLoginInput] = React.useState({
      email: '',
      password: ''
  })


const handleSubmit = async (e) =>{
    e.preventDefault();
    try{
      const response = await axios.post('https://adscamp.thevootblog.com/api/v1/users/login',
        JSON.stringify(loginInput.username, loginInput.password),
        {
          headers: { 'Content-Type' : 'application/json',
          'Authorization': `Bearer ${response?.token}`
         }
        }
      );
      console.log(response)

    }catch(err){
         console.log(err)
    }
  }

我没有得到对象

“在初始化之前无法访问'response'”，这意味着响应为空。

额外信息： 我从另一个文件将 axios 导入到 login.js 文件中：

api(文件夹) => api.js

import axios from "axios";

export default axios.create({
    baseURL: 'http://localhost:3000'
})

Answer 1

首先你只能

JSON.stringify

JSON对象

改变

 JSON.stringify(loginInput.username, loginInput.password)

到

 JSON.stringify({loginInput.username, loginInput.password})

你看到的错误是因为你试图在 http 请求初始化之前访问标头内的响应。

此 HTTP 请求的目的是获取

Authorization Token

所以删除 Authorization 标头。

Answer 2

这是 node.js 代码

const axios = require('axios');

const getToken = async () => {
    try {
        const response = await axios.post(
            url = 'https://adscamp.thevootblog.com/api/v1/users/login',
            data = {
              'email': '[email protected]',
              'password': '<your password>'
            },
            config = {
              headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
              }
            }
        )
        return Promise.resolve(response.data.token)
    } catch (error) {
        return Promise.reject(error)
    }
}

getToken()
    .then((token) => {
        console.log(JSON.stringify(token, null, 4))
    })
    .catch(error => console.log(error));

安装依赖

npm install axios

结果

卷曲推荐

curl --location 'https://adscamp.thevootblog.com/api/v1/users/login' \
--silent \
--header 'Accept: application/json' \
--header 'Content-Type: application/json' \
--data-raw '{
  "email": "[email protected]",
  "password": "your password"
}' | jq

结果

现在您需要隐藏密码。