Question

我正在执行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

Answer 1

您的查询具有username和password的硬编码值，因此无论您在表单中输入什么内容，它们每次都将导致成功登录。您为variables传递的任何值都将被有效忽略，因为您实际上并未在查询中使用变量。更新查询以实际使用您要传入的变量（username和password）。

Apollo useMutation，onCompleted完成在登录身份验证期间始终返回true吗？

1 个答案: