如何使用Apollo和GraphQL刷新JWT令牌 [英] How to refresh JWT token using Apollo and GraphQL

问题描述

因此，我们正在使用Apollo和GraphQL创建一个React-Native应用程序.我正在使用基于JWT的身份验证(当用户同时登录 activeToken 和 refreshToken 时均已创建)，并且想要实现一种流程，当服务器注意到令牌已过期时，令牌会自动刷新.

So we're creating a React-Native app using Apollo and GraphQL. I'm using JWT based authentication(when user logs in both an activeToken and refreshToken is created), and want to implement a flow where the token gets refreshed automatically when the server notices it's been expired.

Apollo链接错误的Apollo文档提供了很好的从起点捕获来自ApolloClient的错误:

The Apollo Docs for Apollo-Link-Error provides a good starting point to catch the error from the ApolloClient:

onError(({ graphQLErrors, networkError, operation, forward }) => {
if (graphQLErrors) {
  for (let err of graphQLErrors) {
    switch (err.extensions.code) {
      case 'UNAUTHENTICATED':
        // error code is set to UNAUTHENTICATED
        // when AuthenticationError thrown in resolver

        // modify the operation context with a new token
        const oldHeaders = operation.getContext().headers;
        operation.setContext({
          headers: {
            ...oldHeaders,
            authorization: getNewToken(),
          },
        });
        // retry the request, returning the new observable
        return forward(operation);
    }
  }
}

但是，我真的很难弄清楚如何实现 getNewToken().我的GraphQL端点具有用于创建新令牌的解析器，但是我无法从Apollo-Link-Error调用它吗?

However, I am really struggling to figure out how to implement getNewToken(). My GraphQL endpoint has the resolver to create new tokens, but I can't call it from Apollo-Link-Error right?

如果令牌是在Apollo客户端将连接到的GraphQL端点中创建的，那么如何刷新令牌?

So how do you refresh the token if the Token is created in the GraphQL endpoint that your Apollo Client will connect to?

推荐答案

示例是一个很好的起点，但假定 getNewToken()操作是同步的.

The example given in the the Apollo Error Link documentation is a good starting point but assumes that the getNewToken() operation is synchronous.

在这种情况下，您必须点击GraphQL端点才能检索新的访问令牌.这是异步操作，您必须使用 apollo的 fromPromise 实用程序功能-link 包将您的Promise转换为Observable.

In your case, you have to hit your GraphQL endpoint to retrieve a new access token. This is an asynchronous operation and you have to use the fromPromise utility function from the apollo-link package to transform your Promise to an Observable.

import React from "react";
import { AppRegistry } from 'react-native';

import { onError } from "apollo-link-error";
import { fromPromise, ApolloLink } from "apollo-link";
import { ApolloClient } from "apollo-client";

let apolloClient;

const getNewToken = () => {
  return apolloClient.query({ query: GET_TOKEN_QUERY }).then((response) => {
    // extract your accessToken from your response data and return it
    const { accessToken } = response.data;
    return accessToken;
  });
};

const errorLink = onError(
  ({ graphQLErrors, networkError, operation, forward }) => {
    if (graphQLErrors) {
      for (let err of graphQLErrors) {
        switch (err.extensions.code) {
          case "UNAUTHENTICATED":
            return fromPromise(
              getNewToken().catch((error) => {
                // Handle token refresh errors e.g clear stored tokens, redirect to login
                return;
              })
            )
              .filter((value) => Boolean(value))
              .flatMap((accessToken) => {
                const oldHeaders = operation.getContext().headers;
                // modify the operation context with a new token
                operation.setContext({
                  headers: {
                    ...oldHeaders,
                    authorization: `Bearer ${accessToken}`,
                  },
                });

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

apolloClient = new ApolloClient({
  link: ApolloLink.from([errorLink, authLink, httpLink]),
});

const App = () => (
  <ApolloProvider client={apolloClient}>
    <MyRootComponent />
  </ApolloProvider>
);

AppRegistry.registerComponent('MyApplication', () => App);

您可以停止上面的实现，直到两个或多个请求同时失败为止.因此，要处理令牌到期时的并发请求失败，请查看

You can stop at the above implementation which worked correctly until two or more requests failed concurrently. So, to handle concurrent requests failure on token expiration, have a look at this post.

这篇关于如何使用Apollo和GraphQL刷新JWT令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！