React Native中Apollo Client传AsyncStorage获取的Token报500错误

核心问题 #

你代码里的getToken()是异步函数，直接赋值给token时，得到的并不是实际的Token字符串，而是Promise对象。后端收到的authorization请求头会是[object Promise]这类无效值，无法正确解析，因此返回500服务器错误。

修复方案 #

方案1：用Apollo的setContext动态获取Token（推荐） #

这种方式会在每次请求时自动异步获取最新Token，还能处理Token过期、不存在的场景：

import { ApolloClient, ApolloProvider, InMemoryCache, setContext } from '@apollo/client'
import { createUploadLink } from 'apollo-upload-client'
import AsyncStorage from '@react-native-async-storage/async-storage'

// 创建基础上传链接
const uploadLink = createUploadLink({
  uri: 'http://192.168.1.82:8080/graphql',
})

// 创建认证链接，动态注入Token
const authLink = setContext(async (_, { headers }) => {
  const token = await AsyncStorage.getItem('@storage_Key')
  return {
    headers: {
      ...headers,
      authorization: token || '', // 处理Token不存在的情况
    }
  }
})

// 组合链接并初始化客户端
const client = new ApolloClient({
  link: authLink.concat(uploadLink),
  cache: new InMemoryCache()
})

方案2：异步初始化ApolloClient #

如果需要先获取Token再创建客户端，可以在根组件中处理：

import { useEffect, useState } from 'react'
import { Text } from 'react-native'
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client'
import { createUploadLink } from 'apollo-upload-client'
import AsyncStorage from '@react-native-async-storage/async-storage'

export default function App() {
  const [client, setClient] = useState(null)

  useEffect(() => {
    const initClient = async () => {
      const token = await AsyncStorage.getItem('@storage_Key')
      const newClient = new ApolloClient({
        link: createUploadLink({
          uri: 'http://192.168.1.82:8080/graphql',
          headers: {
            authorization: token || '',
          }
        }),
        cache: new InMemoryCache()
      })
      setClient(newClient)
    }
    initClient()
  }, [])

  // 等待客户端初始化完成
  if (!client) {
    return <Text>加载中...</Text>
  }

  return (
    <ApolloProvider client={client}>
      {/* 你的应用内容 */}
    </ApolloProvider>
  )
}

额外检查点 #

• 确认AsyncStorage中@storage_Key对应的Token值是否正确，比如是否缺失后端要求的前缀（如Bearer ）
• 查看后端日志，确认收到的authorization头具体内容，进一步定位解析失败的原因

内容的提问来源于stack exchange，提问作者user20570472