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

Posted 2023-03-10

【中文标题】如何使用 apollo Reactjs 客户端刷新 Firebase IdToken

【英文标题】：How to refresh firebase IdToken with apollo Reactjs client

【发布时间】：2019-09-03 21:19:05

【问题描述】：

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

当用户登录并在请求标头上使用它时，我目前正在保存 IdToken 本地存储，但是当令牌过期时，graphql 返回非授权错误。我还尝试在 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')
;

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

【问题讨论】：

我有一个类似的问题，但现在还有一些其他问题：***.com/questions/57163454/…

【参考方案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(
  s-s-rMode: typeof window !== 'undefined',
  cache: new InMemoryCache().restore(),
  link
)

【讨论】：

添加来自 Apollo 的文档以使这个答案更完整：apollographql.com/docs/react/networking/authentication

【参考方案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);