我连接到一个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，将包含这样的逻辑;

1. 获取用户名和密码
2. 检查用户名和密码是否存在。
3. 如果是，返回访问令牌
4. 如果没有，返回一个失败的验证错误码。

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

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

要做到这一点，显然取决于数据库-你必须安装/导入相关的包来发出请求。

另一个解决方案是在服务器端有一个单独的端点来检查凭据是否存在并返回一个布尔值。