Как добавить новый заголовок авторизации для клиента Apollo в компоненте React?

Question

Как добавить токен в заголовок авторизации клиента 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 .