apollo-client, onError, ApolloProvider, client.writeData(localstate)... 当服务器返回 401 时如何处理对用户的身份验证

Posted 2023-03-10

【中文标题】apollo-client, onError, ApolloProvider, client.writeData(localstate)... 当服务器返回 401 时如何处理对用户的身份验证

【英文标题】：apollo-client, onError, ApolloProvider, client.writeData(localstate)... how to handle authenticating a user when server returns 401

【发布时间】：2019-09-05 13:52:43

【问题描述】：

所以我有一个使用 apollo-graphql 的应用程序，其中某些解析器仅对经过身份验证的用户可用，如果未经身份验证的用户尝试访问它们，它们会返回 401。我知道，那里没有什么突破性的东西。

但是，我试图拦截错误，处理它，调用一个函数来注销用户（重置本地状态会话对象），然后重定向到“/login”。

所以，这里我有 onError：-

import  logout  from "_helpers"

const errorLink = onError(( graphQLErrors, networkError ) =>     
    ...
    if (networkError && networkError.statusCode === 401) 
        logout()
        history.push('/')
    
    ...
);

现在，我有 2 个版本的 logout() 函数 - 一个是在 props 中传递 apollo 客户端，另一个是我尝试使用 ApolloProvider 使其可用：-

import  ApolloConsumer  from "react-apollo"

export const logout = () => 
  return (
    <ApolloConsumer>
    client => client.writeData(data: session: ...session, isAuthed: false)
    </ApolloConsumer>
  )


export const logout = (client) => 
    client.writeData(data: session: ...session, isAuthed: false)

第一个版本 - 在参数中传递客户端 - 已经在客户端已经对调用 logout() 的代码可用的组件中进行了尝试和测试，因此 client.writeData(data: session: ... session, isAuthed: false）工作正常。但是，我希望有一个无需在参数中传递客户端即可调用的函数版本，这就是我有第二个版本的原因。但是，这不起作用 - 它似乎没有运行 writeData()。

所以我想知道以下一项或两项：-

为什么第二个版本（ApolloProvider 正在传递客户端）不起作用？

如果我希望简单地使用客户端作为参数传递的 logout() 版本，有什么方法可以让客户端在我的 onError() 代码中可用，如下所示？

const errorLink = onError(( graphQLErrors, networkError ) => 
    ...
    if (networkError && networkError.statusCode === 401) 
        logout(client)
        history.push('/')
    
    ...
);

非常感谢任何帮助...

【参考方案1】：

在这里找到传递客户的答案：-

https://github.com/apollographql/apollo-link/issues/595