如何使用 apollo Reactjs 客户端刷新 firebase IdToken

Question

我在 ReactJS 中使用 Apollo 客户端与 GraphQL API 进行通信。 我们使用 Firebase 身份验证和 JWT 来确保我们的 API 不会向公众公开私人数据，但问题是 firebase 令牌每隔一小时左右就会过期一次。

当用户登录并在请求标头上使用它时，我目前正在保存 IdToken localstorage，但是当令牌过期时，graphql 返回 Non Authorized 错误。 我还尝试在 apollo 的 createHttpLink 函数上使用 customfetch

const customFetch = async (uri, options) => {
    console.log(firebase.auth.currentUser)
    if (firebase.auth.currentUser) {
        const token = await firebase.auth.currentUser.getIdToken()
        localStorage.setItem('token', token)
        options.headers.authorization = token;
        return fetch(uri, options);
    }
    else {
        firebase.auth.onAuthStateChanged(async (user) => {
            if (user) {
                console.log('Inside on Auth')
                const token = await user.getIdToken()
                localStorage.setItem('token', token)
                options.headers.authorization = token;
                return fetch(uri, options);
            }
        })
    }
    console.log('End of Fetch')
};

但是在 firebase.auth.onAuthStateChanged 完成之前获取完成，所以它也不起作用

Answer 1

将其设为自定义链接而不是自定义获取。

import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloLink } from 'apollo-link'
import firebase from 'firebase/app'
import 'firebase/app'
import { setContext } from 'apollo-link-context'
const authLink = setContext((_, { headers }) => {
  //it will always get unexpired version of the token
  return firebase
    .auth()
    .currentUser.getIdToken()
    .then((token) => {
      return {
        headers: {
          ...headers,
          authorization: token ? `Bearer ${token}` : ''
        }
      }
    })
})
const link = ApolloLink.from([authLink, ...{/**ur other links */}])

const client = new ApolloClient({
  ssrMode: typeof window !== 'undefined',
  cache: new InMemoryCache().restore({}),
  link
})

Answer 2

我为此使用递归，但不确定它是否有任何问题。

firebase.auth.onAuthStateChanged(async (user) => {
    if (user) {
        setToken(user)
    }
})

const setToken = async (user) => {
    const token = await user.getIdToken();
    localStorage.setItem("token", token);

    setTimeout(() => setToken(user), 59000);
}