reactjs - Apollo useMutation,onCompleted完成在登录身份验证期间总是返回true?
问题描述
我正在执行 GraphQL 突变以尝试登录身份验证,但它每次都返回 true 并存储新用户 AuthToken,即使登录详细信息不正确也是如此。这很奇怪,因为当我在 IDE 中运行 GraphQL 查询时,它可以正常工作。(即,仅当登录名/密码正确时才成功)。我不确定它是如何生成 auth.Token 和 console.logs “onSuccess”的,不管我在表格中输入了什么。任何帮助将不胜感激,这让我发疯。谢谢你。
const LOGIN_USER = gql `
mutation LoginUser {
login (input: {
clientMutationId:"uniqueId"
username: "admin"
password: "password"
}) {
authToken
user {
id
name
}
}
}
`
const SignIn = (props) => {
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [loggedIn, setLoggedIn] = useState(false)
const onLoginError = () => {
console.log("onError")
}
const onLoginSuccess = () => {
console.log("onSuccess")
}
const [loginUser, { loading, error }] = useMutation(LOGIN_USER, {
onCompleted({login}) {
localStorage.setItem('token', login.authToken)
onLoginSuccess()
},
onError(error){
alert(error)
onLoginError()
}
})
const onLoginSubmit = (event) => {
event.preventDefault()
loginUser({ variables:
{
"input": {
"clientMutationId": "uniqueId",
"username": username,
"password": password
}
}
})
}
const handleOnChange = (event) => {
if(event.target.name === "username") {
setUsername(event.target.value)
} else if(event.target.name === "password") {
setPassword(event.target.value)
}
}
return (
<form onSubmit={onLoginSubmit}>
<>
<input
className={styles.formInput}
name="username"
placeholder="Username or email"
type="text"
value={username}
onChange={handleOnChange}
>
</input>
<input
className={styles.formInput}
name="password"
placeholder="Password"
type="password"
value={password}
onChange={handleOnChange}
>
</input>
<button
className="button is-primary is-pulled-right has-text-weight-semibold"
type="submit"
disabled={loading}
><FiLogIn className={styles.loginIcon}/>
Login
</button>
</form>
</>
export default SignIn
解决方案
您的查询具有 和 的硬编码值username
,password
因此无论在表单中输入什么,它们每次都会导致成功登录。您传入的任何值variables
实际上都会被忽略,因为您实际上并没有在查询中使用变量。更新您的查询以实际使用您传入的变量 (username
和password
)。
推荐阅读
- r - 在闪亮的应用程序中存储消息 - 最佳实践
- javascript - GraphQL 如何在 node.js 中将服务器错误与客户端错误(最好使用 TryCatch 块)分开?
- python - 如何在 matplotlib 中的集合之间共享标签?或者我如何干净地制作图例?
- apache - 在输入带有子文件夹的网站 URL 时,为什么子文件夹名称会与 URL 名称组合在一起?
- ios - 仅当我的应用程序 Swift UIKit 中的视频取消静音时才停止其他应用程序的背景音乐
- python - 如何从python中的字符串输出创建熊猫数据框
- c - 程序运行时收到退出代码 -1073741819
- javascript - 使用拼接方法出现问题,总是删除第一项
- windows - 批处理文件仅在文件夹有内容时才移动文件
- mysql - 使用 openshift 上公开的路由连接到 MySQL 数据库