Как я могу назначить токен в асинхронном хранилище для заголовков в app.js после входа в систему. в реактивном нативе

Я получаю токен доступа после входа в систему и хочу назначить этот токен для авторизации в заголовках моего App.js. Я использую асинхронное хранилище для хранения токена доступа в локальном хранилище и хочу назначить его заголовкам в своем приложении. js файл Как мне это сделать. Я хочу назначить токен для авторизации в заголовках, чтобы я мог выполнять вызовы API graphql

МОЙ файл App.js

import React, {Component} from 'react';
import {AppRegistry,SafeAreaView, StyleSheet} from 'react-native';
import Navigator from "@Navigation"
import AsyncStorage from '@react-native-community/async-storage';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-boost';

const httpLink = createHttpLink({
  uri: 'https://graphql.sample.com/graphql',
});

const token = AsyncStorage.getItem('@accessToken')

 const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        ...headers,
        authorization: token ,
      }
    }
});

const link = authLink.concat(httpLink)

const cache = new InMemoryCache();

const defaultOptions = {
  query: {
    fetchPolicy: "network-only",
    errorPolicy: "all"
  }
};

const client = new ApolloClient({
  link,
  cache,
  defaultOptions
});
class App extends Component {
  render() {
    return (
        <ApolloProvider client={client}>
            <Navigator/>
        </ApolloProvider>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
});
export default App;

react-native graphql apollo-client asyncstorage request-headers
person Pratap Penmetsa    schedule 26.05.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны дождаться AsyncStorage.getItem('@accessToken'), чтобы получить ваш accessToken, прежде чем передать его authorization: token. Это сообщение, относящееся к Waiting for AsyncStorage.getItem() в React Native.
Попробуйте следующее:

...
const token = await AsyncStorage.getItem('@accessToken')

 const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        ...headers,
        authorization: token ,
      }
    }
});

...

person Michael    schedule 29.05.2020
comment
не удалось получить значение из AsyncStorage, когда мы назначаем токен const - person Pratap Penmetsa; 29.05.2020

arrow_upward
0
arrow_downward

Мне помогло изменение функции authLink для работы с async/await! Надеюсь это поможет;

const authLink = setContext(async (_, { headers }) => {
    // get the authentication token from async storage if it exists
    const accessToken = await AsyncStorage.getItem('@accessToken');

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