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

Question

我在ReactJS中使用Apollo Client与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完成之前就完成了，所以它也不能正常工作。

- Isala Piyarisi

---

我有一个类似的问题，但现在仍然存在其他问题：https://stackoverflow.com/questions/57163454/refreshing-a-token-with-apollo-client-firebase-auth - A.com

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
})

- Tanapruk Tangphianphan

---

将Apollo文档添加到答案中，以使其更完整：https://www.apollographql.com/docs/react/networking/authentication/ - Siul

如果我在 firebase.auth().currentUser 中得到了 null，我该怎么办？是否有一种方法可以使用 onAuthStateChanged 来解决，就像这里所解释的那样 - https://medium.com/firebase-developers/why-is-my-currentuser-null-in-firebase-auth-4701791f74f0? - Nelu

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);
}

- Neil Nguyen