我正在连接到 API，我需要检查 Api 中是否存在用户和密码

Question

所以我正在尝试验证插入的用户和密码是否在 API 数据库中，现在我的代码只要求输入用户名和密码并给它一个由 API 即使用户不存在。我的问题是如何调用 API 来验证用户是否存在。我正在尝试创建一个 if 循环来与 API 进行通信，但我没有任何想法？这是我的代码：

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import"./App.css";
const Login = () => {
  const [username, setUsername] = useState("");
  const [Password, setPassword] = useState("");
  const [error] = useState(null);
  const [loading] = useState(false);
  const navigate = useNavigate();

  const handleLogin = () => {
    console.log("name------->", username);
    console.log("pass------->", Password);


    var axios = require("axios");
    var data = JSON.stringify({
      "password": Password,
      "username": username,
    });

    var config = {
      method: "post",
      url: "https://api.secureme.pt/api/v1/auth/login",
      headers: {
        "Content-Type": "application/json",
      },
      data: data,
    };

    axios(config)
      .then(function (response) {
        console.log("token----->", response.data.token);
        sessionStorage.setItem("token", response.data.token);
        navigate("/home");
      })
      .catch(function (error) {
        console.log(error);
      });
  };

  return (
    <div className="Login">
      <div className="title">
      Login
      </div>
      <br />
      <br />
      <div>
        Username: <br />
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div>
        Password: <br />
        <input
          type="password"
          value={Password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <br />
      {error && <div className="error">{error}</div>}
      <input className="button"
        type="button"
        value={loading ? "Loading..." : "Login"}
        disabled={loading}
        onClick={handleLogin}
      />
    </div>
  );
};
export default Login;

Answer 1

我会 100% 在服务器端添加该逻辑。
因此，您的登录端点：https://api.secureme.pt/api/v1/auth/login，将包含类似；

的逻辑

获取用户名和密码。
检查数据库中是否存在用户名和密码。
如果是，return 访问令牌。
如果不是，则通过 return 验证失败的错误代码进行相应处理。

话虽这么说，如果你坚持在前端做的话。不知道您使用的是什么数据库 - 很难分享任何示例。

但是在你的 handleLogin() 函数中，在你用 Axios 调用 login 端点之前，就在这之前 - 检查用户名和密码是否存在于数据库中。

要执行此操作，显然取决于数据库 - 您必须 install/import 相关包才能发出该请求。

另一种解决方案是在服务器端有一个单独的端点，用于检查凭据是否存在以及 return 布尔值。

我正在连接到 API，我需要检查 Api 中是否存在用户和密码

Im connecting to an API and i need to check if the user and password exist in the Api

javascript

api

reactjs

react-native