如何使用Apollo和React Native实现每个图形请求之前的自动jwt令牌刷新？

Question

我想在React原生应用程序中使用Apollo中间件在每次请求GraphQL之前实现自动刷新jwt令牌。每次用户登录后，他都会得到两个令牌：访问和刷新。访问令牌是在授权头中使用的30-60分钟的短令牌。而刷新标记是60天的长标记，用于确认刷新标记graphql突变。我的流程：

1. 用户登录并获得2个令牌-

GraphQL突变

mutation UpdateTokens($refreshToken: String!, $refreshTokenId: String!) 
 {
    updateTokens(refreshToken: $refreshToken, refreshTokenId: $refreshTokenId) {
      user {
        name
        phone
      }
      accessToken
      refreshToken
    }
  }

应用程序。js

import React from 'react'
import { ApolloClient } from 'apollo-client'
import { ApolloLink } from 'apollo-link'
import { ApolloProvider } from 'react-apollo'
import { ApolloProvider as ApolloHooksProvider } from 'react-apollo-hooks'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { setContext } from 'apollo-link-context'
import * as Keychain from 'react-native-keychain'
import AppNavigator from './AppNavigator'

const httpLink = createHttpLink({
  uri: 'http://localhost:4000'
})

const cache = new InMemoryCache()

const authLink = setContext(async (req, { headers, ...context }) => {
  const tokens = await Keychain.getGenericPassword()
  const accessToken = tokens.username
  return {
    headers: {
      ...headers,
      authorization: accessToken ? `Bearer ${accessToken}` : ''
    },
    ...context
  }
})

const client = new ApolloClient({
  link: ApolloLink.from([authLink, httpLink]),
  cache,
  connectToDevTools: true
})

const App = () => {
  return (
    <ApolloProvider client={client}>
      <ApolloHooksProvider client={client}>
        <AppNavigator />
      </ApolloHooksProvider>
    </ApolloProvider>
  )
}

export default App

Answer 1

我真的认为你走在正确的道路上——当我读到你需要的功能时，我想到了阿波罗-链接-上下文，很高兴看到你正在采取这种方法。我们最近不得不在一个反应本机应用程序中实现类似的功能，这需要附加带有身份验证相关数据的自定义标题。为了检索这些数据，我们需要发出异步请求，尽管我们的请求是通过网络发送给第三方服务的。我们像你一样在客户端的setContext中完成了这一切。这很有效。

我认为你不需要担心用你的代币更新你的阿波罗缓存，不管是手动还是其他方式，至少有几个原因。首先，考虑到存储内容的准敏感性质，最好的做法是采用更安全的存储解决方案，在本例中，它很可能是钥匙链。此外，为应用程序中的标记提供一个真实来源可以保持干净。

假设您不想将这些数据写入缓存，我会再次检查Apollo客户端是否自动这样做。例如，如果您之前出于某种原因查询了您的令牌数据，Apollo可能会在收到有效负载后自动更新您的缓存。只是需要注意的事情。