React＆Apollo，用户登录时如何设置授权header？

Question

假设我们最初创建这样的客户端

const client = new ApolloClient({
  uri:'https://api.com/graphql'
})

最初这个 api 有一些突变，如 signIn 和 signUp 暴露，不需要身份验证。

在线某处用户登录并收到授权令牌。这个令牌现在需要在我们的 apollo client 上设置为 header 即

headers: {
   Authorization: `Bearer ${token}`
}

是否可以以某种方式更新 client "on the fly" 以应用此 header 以便将来 api 请求使用它？

Answer 1

根据 documentation 你可以这样做：

import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';

const httpLink = createHttpLink({
  uri: '/graphql',
});

const authLink = setContext((_, { headers }) => {
  // get the authentication token from local storage if it exists
  const token = localStorage.getItem('token');
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

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

更新

您可以使用 'apollo-boost'

更新您的令牌

Note that the above example is using ApolloClient from the apollo-client package. Headers can still be modified using ApolloClient from the apollo-boost package, but since apollo-boost doesn't allow the HttpLink instance it uses to be modified, headers have to be passed in as a config parameter:

import ApolloClient from 'apollo-boost'

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

React＆Apollo，用户登录时如何设置授权header？

React & Apollo, how to set authorization header when user logs in?

apollo

reactjs

graphql

apollo-client