Изменить параметры клиента Apollo для токена jwt - PullRequest
Новая
       10

Изменить параметры клиента Apollo для токена jwt

1 голос
/ 26 марта 2019

Я хочу настроить токен в моем клиенте apollo, когда пользователь входит в систему.

Это мой index.js: 

const client = new ApolloClient({
        ssrMode: SERVER_MODE,
        cache: new InMemoryCache().restore(cache),
        link: createUploadLink({
            uri: process.env.REACT_APP_API_URL,
            fetch: SERVER_MODE ? global.fetch : NetworkService.customFetch,
            headers: {
                Authorization: 'Bearer ' + window.localStorage.access_token,
           }
        }),
        defaultOptions: NetworkService.defaultOptions,
    });

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

Дело в том, что при запуске приложения токена нет, поэтому клиент инициализируется токеном: null.

Когда пользователь входит в систему, я устанавливаю токен, но мне как-то нужно обновить приложение, чтобы учесть токен.

Функция входа в систему просто сохраняет токен в localStorage после успешного вызова API входа в систему.

Как мне подойти к этому? Сейчас я делаю полную перезагрузку страницы после входа в систему, чтобы обойти эту проблему ...

1 Ответ

1 голос
/ 28 марта 2019

Я использовал метод setContext, как описано здесь: http://dev.apollodata.com/react/auth.html#Header, и он отлично работает! 

static authLink = setContext((_, { headers }) => {
    // get the authentication token from local storage if it exists
    const token = localStorage.getItem('access_token');

    // return the headers to the context so httpLink can read them
    return {
        headers: {
            ...headers,
            authorization: token ? `Bearer ${token}` : '',
        }
    };
});

...

new ApolloClient({
    ssrMode: SERVER_MODE,
    cache: new InMemoryCache().restore(cache),
    link: ApolloLink.from([
        NetworkService.authLink,
        NetworkService.errorLink,
        NetworkService.uploadLink
    ]),
    defaultOptions: NetworkService.defaultOptions,
});
...