Question

我从阿波罗开始。我在登录后更新令牌时遇到问题。它总是获取存储在 AsyncStorage 中的先前令牌。当我进入主页时（登录后），在执行查询时，返回身份验证错误。我正在将 Apollo 与 ReactNative 和打字稿一起使用。以下是我的 App、Login 和 console.log 的代码：提前致谢！

App.tsx

import { registerRootComponent } from 'expo'
import AsyncStorage from '@react-native-async-storage/async-storage'
import { StatusBar } from 'expo-status-bar'
import React from 'react'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import AppLoading from 'expo-app-loading'
import { useFonts } from 'expo-font'
import {
  ApolloClient,
  ApolloLink,
  InMemoryCache,
  HttpLink,
  concat
} from '@apollo/client'
import { ApolloProvider } from '@apollo/react-hooks'
import { createUploadLink } from 'apollo-upload-client'

import { MainStackNavigator } from '../src/navigation/MainStackNavigator'

function App() {
  const isLoadingComplete = (
    <AppLoading
      startAsync={this._cacheResourcesAsync}
      onFinish={() => this.setState({ isReady: true })}
      onError={console.warn}
    />
  )
  const [fontsLoaded] = useFonts({
    Poppins: require('../assets/fonts/Poppins.ttf'),
    'Poppins-Bold': require('../assets/fonts/Poppins-Bold.ttf')
  })
  if (!fontsLoaded) {
    return <AppLoading />
  }

  const httpLink = new HttpLink({
    uri: 'localhost:4000/graphql'
  })

  const getToken = async () => {
    const token = await AsyncStorage.getItem('token')
    return token
  }

  const token = getToken()

  const authMiddleware = new ApolloLink((operation, forward) => {
    operation.setContext({
      headers: {
        authorization: token ? `Bearer ${token}` : ''
      }
    })

    console.log('Token from App.tsx >>>>> ', token)

    return forward(operation)
  })

  // createUploadLink()

  const client = new ApolloClient({
    cache: new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            departments: {
              merge(existing, incoming) {
                return incoming
              }
            },
            outsources: {
              merge(existing, incoming) {
                return incoming
              }
            },
            users: {
              merge(existing, incoming) {
                return incoming
              }
            }
          }
        }
      }
    }),
    link: concat(authMiddleware, httpLink)
  })

  if (!isLoadingComplete) {
    return null
  } else {
    return (
      <ApolloProvider client={client}>
        <SafeAreaProvider>
          <MainStackNavigator />
          <StatusBar />
        </SafeAreaProvider>
      </ApolloProvider>
    )
  }
}

registerRootComponent(App)

控制台日志：

Token from App.tsx >>>>>  Promise {
  "_U": 0,
  "_V": 1,
  "_W": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImRpZWdvLnJvZHJpZ28uYW5kcmFkZUBnbWFpbC5jb20iLCJzdWIiOiI2MDc1OTBmMTc5ZjQ2ZjAwMjYyMzlkYWIiLCJpYXQiOjE2MTk5Njk1MDksImV4cCI6MTYxOTk3NjcwOX0.qpazBU9gzKgUN2H-o0_hFP4h2gtieLpLyC6dk5DVju0",
  "_X": null,
}
=== Token after login ==>  eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImRpZWdvLnJvZHJpZ28uYW5kcmFkZUBnbWFpbC5jb20iLCJzdWIiOiI2MDc1OTBmMTc5ZjQ2ZjAwMjYyMzlkYWIiLCJpYXQiOjE2MTk5NzA5NzIsImV4cCI6MTYxOTk3ODE3Mn0.3c3jlMELNkzQplxH_tQVlR_1GbCOdLX0hMKF6NXsAPk

登录.tsx

const setToken = async token => {
  await AsyncStorage.setItem('token', token)
  console.log('=== Token after login ==> ', token)
  return token
}

export function Login({ navigation }: Props) {
  const [
    login,
    { data: loginData, loading: mutationLoading, error: mutationError }
  ] = useMutation(LOGIN, {
    onCompleted: loginData => setToken(loginData.login.token)
  })

Answer 1

我遇到了同样的问题。检查了 AsyncStorage 的文档。获取项目返回一个承诺： https://react-native-async-storage.github.io/async-storage/docs/api/

JSON.parse(token) 修复了它，可以得到令牌的字符串。

登录后如何在 apollo 客户端刷新令牌

1 个答案: