Question

如何在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>
    );
};

Answer 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网站上找到。

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

1 个答案: