如何在 React 组件中向 Apollo 客户端添加新的授权标头？

Posted 2023-03-10

【中文标题】如何在 React 组件中向 Apollo 客户端添加新的授权标头？

【英文标题】：How to add new authorization header to Apollo client within a React component?

【发布时间】：2020-01-20 06:36:54

【问题描述】：

如何将令牌添加到 React 组件中的 Apollo 客户端授权标头？

我有一个登录功能，它将 Google 授权代码传递给后端，接收加密令牌，我想将其添加到授权标头中，以便在此之后发出的每个请求都包含它，并且可以在后端进行验证以保护API 路由。

这个令牌被返回到一个 React 组件，但我不确定使用什么命令来执行此操作？我假设 client.writeData 用于本地存储，但不适用于标头的上下文。

这是我的 React 组件中的代码：

export default function LoginForm() 
    function userLogin(code)
         let token = googleAuthenticate(code.code);
         if(token === Error())
            console.log("poop");
         else
            // ADD NEW AUTHORIZATION HEADER HERE.
         
    

    return(<div>
             <GoogleLogin
            clientId="xyz"
            buttonText="Login"
            onSuccess=userLogin
            onFailure=userLogin
            cookiePolicy='single_host_origin'
            hostedDomain="blabla.com"
            responseType="code"

  />
            </div>
    );
;

【参考方案1】：

一种方法是像这样使用 localStorage()：

function userLogin(code)
   let token = googleAuthenticate(code.code);
   if(token === Error())
     console.log("poop");
    else 
     localStorage.setItem('token', token);
   

然后相应地修改 ApolloClient 代码：

const client = new ApolloClient(
  request: (operation) => 
    const token = localStorage.getItem('token');
    operator.setContext(
      headers: 
        authorization: token ? `Bearer $token` : ''
      
    
  
)

您必须为注销时编写一些代码以擦除令牌等，

这也可以在ApolloGraphQL.com 网站上找到。

【讨论】：

感谢您的回复！由于我使用的是 s-s-r 网站，因此无法使用本地存储。您显示的第二个代码部分是否会将标头修改为客户端？我得到的印象不会做任何事情，因为您只是用该功能实例化一个变量，但实际上并没有应用它。还是我错了？

你可以使用 indexeddb 而不是 localStorage？如果您选择这样做，这里有一个教程链接可以帮助您：developers.google.com/web/ilt/pwa/working-with-indexeddb

我会检查一下，谢谢你的朋友。虽然，如果我可以从那个反应组件设置标题，那就没有必要了。我想这是不可能的？

这个头文件应该只在某个函数被调用后才设置。因此，在客户端初始化中设置标头不是目标，而是在我从后端收到令牌后触发。这个令牌被转移到这个组件。所以我认为不需要任何本地存储。

s-s-r 总是让事情变得更难。看看official example 了解如何设置您的客户端。