刷新 apollo 客户端中的过期令牌答案

【问题标题】：Refresh expired token in apollo client刷新 apollo 客户端中的过期令牌
【发布时间】：2022-11-29 04:50:13
【问题描述】：

我正在尝试在访问令牌过期后刷新它这是我的代码

const getNewTokens = () => {
    const refreshToken = localStorage.getItem('account:refreshToken');
    const accessToken = localStorage.getItem('account:accessToken');
    return apolloClient
      .mutate({
        mutation: REFRESH_TOKEN,
        variables: { accessToken, refreshToken }
      })
      .then((response) => {
        const { tokens } = response.data.refreshTokens;
        localStorage.setItem('account:refreshToken', tokens.refreshToken);
        localStorage.setItem('account:accessToken', tokens.accessToken);
        return tokens;
      });
  };

const errorLink = onError(({ graphQLErrors, networkError, operation, forward }) => {
    if (graphQLErrors)
      graphQLErrors.forEach(({ message, locations, path }) =>
        console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`)
      );
    if (networkError) {
      console.log(`[Network error]: ${networkError}`);
      if (networkError.statusCode === 401) {
        getNewTokens().then(() => {
          const oldHeaders = operation.getContext().headers;

          // modify the operation context with a new token
          operation.setContext({
            headers: {
              ...oldHeaders,
              authorization: `Bearer ${localStorage.getItem('account:accessToken')}`
            }
          });

          // retry the request, returning the new observable
          return forward(operation);
        });
      }
    }
  });

现在发生的事情是当我得到 401 Unauthorized 时，refreshToken 突变返回新的令牌，但它不会重新获取失败的操作

【问题讨论】：

标签： reactjs graphql apollo-client

【解决方案1】：

我们通常做的是存储令牌及其创建时间，如果令牌的当前时间 > TTL，则通过请求拦截器命中刷新令牌端点。（这就是我们通常使用 axios 的方式，我猜其他 graphql 客户端也是如此）

【讨论】：