Apollo useMutation，onCompleted完成在登录身份验证期间总是返回true？

Posted 2023-03-08

【中文标题】Apollo useMutation，onCompleted完成在登录身份验证期间总是返回true？

【英文标题】：Apollo useMutation, onCompleted completion always returning true during Login Authentication?

【发布时间】：2020-07-15 07:04:46

【问题描述】：

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

【问题讨论】：

您是否在缓存查询？ auth token是每次不同还是同一个token？

每次都是同一个token。这很糟糕吗？

当您使用不同的客户端（如 Postman）运行相同的查询时，是否每次都使用不同的令牌？您可能正在前端缓存查询结果。将选项 "useCache": false 传递给突变。我不确定您使用的是什么库，但不是 useCache，它可能是“networkPolicy”。搜索有关防止查询缓存的相关文档。

其实很抱歉，每次都会变。我在这里使用 Apollo apollographql.com/docs/react/data/mutations 但我找不到任何关闭缓存的变量。我有 clearStored 和 cookies 但仍然没有运气。我正在努力让 Postman 处理突变，似乎只做查询。

【参考方案1】：

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

【讨论】：

啊天啊，你不知道我为此绞尽脑汁。不敢相信我错过了。谢谢丹尼尔！