授权后更新标头authLink react-apollo

Question

I am using the Github Graphql API.

When my app first loads I send the user off to retrieve an access_token . This is working, however, the app has already loaded so I need to update the authorization headers once an access_token has been returned from the server. My code in my index.js file looks like the following

// request to get access_token
request.post({
  url: 'http://localhost:8080/authorize',
  body: JSON.stringify({ code: '123456789' })
}, function(error, response, body){ 
   // token is retrieved at this point, 
   // but the code to set up the Apollo-client 
   // has already been executed.
  let token = body.token
});

// all the code below is executed before the access_token above is returned
const httpLink = createHttpLink({
  uri: 'https://api.github.com/graphql',
})

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      authorization: `Bearer ${process.env.REACT_APP_GITHUBTOKEN}`,
    }
  }
})

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
})

ReactDOM.render(
  <BrowserRouter>
    <ApolloProvider client={ client }>
      <App />
    </ApolloProvider>
  </BrowserRouter>,
  document.getElementById('root'),
)

Answer 1

Store the token somewhere on the client. localStorage would be a good option.

When you receive the token

...
let token = body.token
localStorage.setItem('token')

The function you pass to setContext gets executed on every request so you can read the token from localStorage even after the initial app load.

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      authorization: `Bearer ${localStorage.getItem('token')}`,
    }
  }
})