<p>apollo-link-error-토큰을 비동기식으로 새로 고치는 방법은 무엇입니까?</p>

Promise에 더 익숙하다면 fromPromise 도우미를 사용할 수 있습니다.

import { fromPromise } from 'apollo-link';

return fromPromise(refreshToken().then(token => {
  operation.setContext({
    headers: {
      ...oldHeaders,
      authorization: token,
    },
  });
  return forward(operation);
}))

@thymikee 솔루션을 시도했지만 다음 메시지와 함께 실패합니다.

Uncaught (in promise) Error: Network error: Error writing result to store for query:
 query UserProfile($id: ID!) {
  UserProfile(id: $id) {
    id
    email
    first_name
    last_name
    activated
    created_at
    updated_at
    last_active
    roles {
      id
      name
      __typename
    }
    permissions {
      name
      value
      __typename
    }
    profile {
      address
      secondary_email
      phone {
        id
        number
        type {
          id
          name
          __typename
        }
        __typename
      }
      __typename
    }
    __typename
  }
}

Cannot read property 'UserProfile' of undefined
    at new ApolloError (ApolloError.js:43)
    at QueryManager.js:327
    at QueryManager.js:759
    at Array.forEach (<anonymous>)
    at QueryManager.js:758
    at Map.forEach (<anonymous>)
    at QueryManager.webpackJsonp../node_modules/apollo-client/core/QueryManager.js.QueryManager.broadcastQueries (QueryManager.js:751)
    at QueryManager.js:254

추가 검사를 통해 위의 코드를 사용할 때 Apollo 링크의 onError 가 두 번 호출됨을 알 수 있습니다. refresh token 약속을 한 번만 실행하도록 제한해도 오류가 수정되지 않습니다.

무슨 일이 일어나는지:

1) 초기 쿼리 실행
2) 실패하고 apollo의 링크 onError
삼) ?? apollo의 링크 onError 다시 실행합니다.
4) onError 에서 토큰 새로 고침을 약속하고 실행을 끝내고 해결됩니다.
5) (프라미스 성공 후 초기 쿼리는 두 번 실행되지 않음)
6) 초기 쿼리는 정의되지 않은 data 를 포함하는 결과를 반환합니다.

누군가 이 문제에 대한 해결책을 찾기를 바라는 것입니다. 그렇지 않으면 만료 시 갱신하지 않고 수명이 긴 액세스 토큰을 사용하도록 되돌려야 합니다.

토큰 검색 논리가 정확하면 onError 는 한 번만 호출되어야 합니다. 토큰 쿼리에 문제가 있는 것 같습니다.

@thymikee 더미 약속으로 비동기 요청을 전환했습니다. 위의 메시지와 함께 여전히 실패하고 초기 쿼리가 두 번 실행되지 않습니다. 모든 토큰은 테스트 시점에 유효합니다.

암호:

return fromPromise(
    new Promise((resolve) => {
        let headers = {
            //readd old headers
            ...operation.getContext().headers,
            //switch out old access token for new one
            authorization: `Bearer  mynewaccesstoken`,
        };
        operation.setContext({
            headers
        });
        return resolve(forward(operation));
    })
)

편집: fromPromise 제거하고 올바르게 작동합니다. 어쨌든 결과를 반환하기 전에 링크 스택의 처리가 끝나서 forward(operation) 가 실행되지 않습니다.

fromPromise 코드와 커밋 #172 를 분석한 후 fromPromise 는 Apollo Link 객체와 추측으로만 사용할 수 있습니다.

솔루션을 연구하면서 마침내 이 프로젝트를 우연히 발견했습니다: apollo-link-token-refresh

내 폴로 링크 스택은 이제 다음과 같습니다.

[
   refreshTokenLink,
   requestLink,
   batchHttpLink
]

refreshTokenLink 는 항상 graphql 끝점에 대한 응답을 실행하기 전에 액세스 토큰을 확인하기 위해 호출되며 매력처럼 작동합니다.

불행히도 이것은 graphql 끝점에 대한 호출이 항상 인증되어야 한다고 가정합니다(제 경우에는 인증됨).

onError 콜백이 aync 함수 또는 Promise 반환을 허용하지 않는 것 같습니다. 코드 참조 https://github.com/apollographql/apollo-link/blob/59abe7064004b600c848ee7c7e4a97acf5d230c2/packages/apollo-link-error/src/index.ts#L60 -L74

이 문제는 이전에 보고되었습니다: #190

apollo-link-retry 가 여기서 하는 것과 유사하게 apollo-link-error 가 Promise 처리할 수 있으면 더 잘 작동할 것이라고 생각합니다. #436

동일한 문제가 있고 반응 네이티브와 함께 apollo를 사용하여 AsyncStorage onError에서 일부 토큰을 제거해야 비동기 함수여야 합니다.

이 솔루션은 저에게 효과적 이었습니다:

promiseToObservable.js 유틸리티를 만들어 이 문제를 해결했습니다.

import { Observable } from 'apollo-link';

export default promise =>
  new Observable((subscriber) => {
    promise.then(
      (value) => {
        if (subscriber.closed) return;
        subscriber.next(value);
        subscriber.complete();
      },
      err => subscriber.error(err)
    );
    return subscriber; // this line can removed, as per next comment
  });

그리고

import { onError } from 'apollo-link-error';
import promiseToObservable from './promiseToObservable';

export default (refreshToken: Function) =>
  onError(({
    forward,
    graphQLErrors,
    networkError = {},
    operation,
    // response,
  }) => {
    if (networkError.message === 'UNAUTHORIZED') { // or whatever you want to check
      // note: await refreshToken, then call its link middleware again!
      return promiseToObservable(refreshToken()).flatMap(() => forward(operation));
    }
  });

@crazy4groovy 예를 들어 주셔서 감사합니다. 정말 도움이 됩니다. 그러나, 그것으로 작은 문제가있다 : subscriber 에 따라 유효 리턴 값이 Observable typings가 : 오히려해야 ZenObservable.SubscriptionObserver :

export declare type Subscriber<T> = ZenObservable.Subscriber<T>;

export declare const Observable: {
    new <T>(subscriber: Subscriber<T>): Observable<T>;
};

export declare namespace ZenObservable {
    interface SubscriptionObserver<T> {
        closed: boolean;
        next(value: T): void;
        error(errorValue: any): void;
        complete(): void;
    }

    type Subscriber<T> = (observer: SubscriptionObserver<T>) => void | (() => void) | Subscription;
}

즉, undefined를 대신 반환하는 것이 안전합니다. 프로젝트의 README 파일에 언급되어야 할 것 같습니다.

UPD: 이에 대한 PR을 추가했습니다: https://github.com/apollographql/apollo-link/pull/825

이 문제는 Google에서 높은 순위에 있으므로 일부 사람들을 돕기 위해 여기에 내 솔루션을 공유하고 있습니다. https://gist.github.com/alfonmga/9602085094651c03cd2e270da9b2e3f7

귀하의 솔루션을 시도했지만 새로운 문제에 직면했습니다.

Argument of type '(this: Observable<{}>, observer: Subscriber<{}>) => Observable<{}> | Promise<{}>' is not assignable to parameter of type '(this: Observable<{}>, subscriber: Subscriber<{}>) => TeardownLogic'.
  Type 'Observable<{}> | Promise<{}>' is not assignable to type 'TeardownLogic'.
    Type 'Observable<{}>' is not assignable to type 'TeardownLogic'.
      Property 'unsubscribe' is missing in type 'Observable<{}>' but required in type 'Unsubscribable'

새 인증 토큰이 새로 고쳐지면 어떻게 저장하고 계십니까?

물론 재시도 요청에서 새 헤더를 설정할 수 있지만 원래 액세스 토큰(쿠키에 저장하고 있음)은 업데이트되지 않습니다. 다시 새로고침해야 함).

어떤 이유로 새로 고침 중에 쿠키를 업데이트하려고 할 때마다 다음 오류 메시지가 나타납니다( 여기에서 이에 대해 새 문제를 만들었습니다).

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (_http_outgoing.js:470:11)
    at setCookie (/root/SimplyTidyAdmin/node_modules/nookies/dist/index.js:98:17)
    at /root/SimplyTidyAdmin/.next/server/static/CAhshxrRWHVF6Gzbce~pU/pages/_app.js:1273:63
    at process._tickCallback (internal/process/next_tick.js:68:7)

@StupidSexyJake https://stackoverflow.com/questions/55356736/change-apollo-client-options-for-jwt-token 토큰을 업데이트하는 방법에 대해 비슷한 문제가 발생했습니다.

안녕하세요, @crazy4groovy 감사합니다. 귀하의 솔루션을 시도했지만 여전히 문제가 있습니다. 새 토큰이 요청으로 설정되기 전에 graphql 요청에 토큰을 추가하는 미들웨어가 호출됩니다. 따라서 헤더에는 여전히 유효하지 않은 토큰이 있습니다.

약간의 배경 정보: 토큰이 유효하지 않은 경우 네트워크 오류가 발생하고 새로 고침 토큰을 통해 새 토큰을 얻고 다시 시도할 수 있습니다. 그러나 새로 고침 토큰이 수집되어 로컬 저장소로 설정되기 전에 미들웨어가 호출되기 때문에 여전히 유효하지 않은 토큰이 있습니다. 새로 고침 토큰 논리는 잘 작동합니다. 그런 다음 마지막에 새 토큰 세트를 가져오기 때문입니다. 문제를 약간 디버깅했으며 타이밍은 다음과 같습니다.

• 미들웨어: 잘못된 토큰이 첨부되었습니다.
• 쿼리 요청이 이루어집니다
• 네트워크 오류: 401, 토큰이 유효하지 않아 catch되고 onError 에서 promiseToObservable 논리를 통해 처리되고 다시 시도됩니다.
• onRefreshToken Promise에서 토큰 가져오기가 완료될 때까지 미들웨어는 이미 이전 토큰으로 두 번째 실행 중입니다.
• 토큰은 로컬 저장소에서 업데이트됩니다...

다음은 이러한 부분의 스니펫입니다(onRefreshtoken 건너뛰기. 비동기 함수로 Promise를 반환함).

  const promiseToObservable = (promise: Promise<any>) =>
    new Observable((subscriber: any) => {
      promise.then(
        value => {
          console.log(subscriber);
          if (subscriber.closed) return;
          subscriber.next(value);
          subscriber.complete();
        },
        err => subscriber.error(err)
      );
    });

  const authMiddleware = setContext((operation: GraphQLRequest) => {
    const token = localStorage.getItem('ca_token');
    return {
      headers: {
        ...(token && !isSkipHeader(operation)
          ? { authorization: `Bearer ${token}` }
          : {})
      }
    };
  });

const errorLink = onError(
    ({
      networkError,
      graphQLErrors,
      operation,
      forward
    }: ErrorResponse): any => {
      if (networkError) {
        switch (networkError.statusCode) {
          case 401:
            console.warn('Refreshing token and trying again');
            // await refreshToken, then call its link middleware again
            return promiseToObservable(onRefreshToken(client.mutate)).flatMap(() => forward(operation));
          default:
            // Handle all other errors here. Irrelevant here.
        }
      }
      if (graphQLErrors) {
         // Handle gql errors, irrelevant here.
      }
    }
  );

제가 여기서 무엇을 놓치고 있는지 말씀해 주시겠습니까? 많은 감사드립니다...

네, 혼란을 드려 죄송합니다.

나는 답을 찾았고 여기에 게시한 후 몇 시간 동안 찾고 찾은 후 어리석은 답변이었습니다. apollo 클라이언트를 초기화하는 동안 미들웨어와 오류 링크를 바꿨습니다. 이제 작동합니다. 오류 링크가 먼저 있어야합니다.
이전: link: from([authMiddleware, errorLink, /* others */])
신규: link: from([errorLink, authMiddleware, /* others */])

다시한번 죄송합니다..

안녕하세요 여러분,

새로 고침 토큰에 onError를 사용하여 다음과 같은 문제가 있습니다. nextjs를 사용하는 SSR의 목적을 위해 모든 graphql 쿼리에서 데이터를 수집하고 있지만 예를 들어 2개의 쿼리가 있고 jwt 토큰이 만료되어 각각 오류가 발생하면 어떻게 됩니까? 그런 다음 onError를 두 번 실행하고 비용이 많이 드는 새로 고침 토큰에 대해 두 번 호출합니다. 문제가 어디에서 올 수 있는지 알 수 없습니다. 다음은 내가 사용하는 코드입니다. 도와주시겠어요?

https://gist.github.com/shaxaaa/15817f1bcc7b479f3c541383d2e83650

이 문제로 잠시 씨름했지만 마침내 작동하게 되었습니다. 함께 꾸러미를 던졌습니다.

https://github.com/baleeds/apollo-link-refresh-token

이 패키지와 apollo-link-token-refresh라는 패키지의 주요 차이점은 이 패키지가 새로 고침을 시도하기 전에 네트워크 오류를 대기한다는 것입니다.

변화에 대한 아이디어가 있으면 알려주십시오.

기본 사용법은 다음과 같습니다.

const refreshTokenLink = getRefreshTokenLink({
  authorizationHeaderKey: 'Authorization',
  fetchNewAccessToken,
  getAccessToken: () => localStorage.getItem('access_token'),
  getRefreshToken: () => localStorage.getItem('refresh_token'),
  isAccessTokenValid: accessToken => isTokenValid(accessToken),
  isUnauthenticatedError: graphQLError => {
    const { extensions } = graphQLError;
    if (
      extensions &&
      extensions.code &&
      extensions.code === 'UNAUTHENTICATED'
    ) {
      return true;
    }
    return false;
  },
});

promiseToObservable.js 유틸리티를 만들어 이 문제를 해결했습니다.

import { Observable } from 'apollo-link';

export default promise =>
  new Observable((subscriber) => {
    promise.then(
      (value) => {
        if (subscriber.closed) return;
        subscriber.next(value);
        subscriber.complete();
      },
      err => subscriber.error(err)
    );
    return subscriber; // this line can removed, as per next comment
  });

그리고

import { onError } from 'apollo-link-error';
import promiseToObservable from './promiseToObservable';

export default (refreshToken: Function) =>
  onError(({
    forward,
    graphQLErrors,
    networkError = {},
    operation,
    // response,
  }) => {
    if (networkError.message === 'UNAUTHORIZED') { // or whatever you want to check
      // note: await refreshToken, then call its link middleware again!
      return promiseToObservable(refreshToken()).flatMap(() => forward(operation));
    }
  });

나는 그것을 사용하고 새로 고침 토큰 요청 후 여전히 이전 토큰을 사용하는 것을 발견했습니다. 그래서 나는 다음과 같이 시도합니다.

return promiseToObservable(refreshToken()).flatMap((value) => {
  operation.setContext(({ headers = {} }) => ({
    headers: {
      // re-add old headers
      // ...headers,
      Authorization: `JWT ${value.token}`
    }
  }));
  return forward(operation)
});

작동합니다.
그러나 ...headers (이전 헤더를 다시 추가함을 의미)를 추가하면 전달 요청이 전송되기 전에 뭔가 잘못된 것이 있다는 문제가 있습니다.
ERROR Error: Network error: Cannot read property 'length' of null
... 헤더의 권한 부여가 새 권한 부여와 충돌할 수 있다고 생각합니다.

위의 문제는 apollo-angular "apollo-angular-link-http": "^1.6.0", 이고 apollo-client "apollo-link-http": "^1.5.16", 아닌 반면 link-error는 "apollo-link-error": "^1.1.12",

다른 구문 :눈:

import Vue from 'vue'
import { Observable } from 'apollo-link'
import { onError } from 'apollo-link-error'

const onGraphqlError = async ({ graphQLErrors = [], observer, operation, forward }) => {
  // here you could call the refresh query in case you receive an expired error
  for (let error of graphQLErrors)
    observer.next(forward(operation)) // this line would retry the operation
}

const onNetworkError = async ({ observer, networkError, operation, forward }) => { }

export const errorHandler = opt => new Observable(async observer => {
  try {
    const payload = { ...opt, observer }
    await Promise.all([onGraphqlError(payload), onNetworkError(payload)])
    if (observer.closed) return
    observer.complete()
  } catch (error) {
    observer.error(error)
  }
})

안녕! 전체 웹 소켓 전송을 사용하고 있으므로 토큰 쿼리를 요청해야 합니다. 어떻게 할 생각이 없습니다.
서버가 accessToken 가 만료되었다고 응답할 때 수신 요청을 하고 싶습니다.

import { onError } from "apollo-link-error";

import gql from 'graphql-tag'

// Client: VUE APOLLO
const q = {
    query: gql`query token { token { accessToken } }`,
    manual: true,
    result({ data, loading }) {
        if (!loading) {
            console.log(data)
        }
    },
}

const link = onError(({ graphQLErrors, networkError, operation, response, forward }) => {

    if (networkError) {


        switch (networkError.message) {
            case 'accessTokenExpired':
                console.log('accessTokenExpired')
                return forward(q) // NOT WORKS, NEED HELP
            case 'unauthorized':
                return console.log('unauthorized')
            default:
                return forward(operation)
        }
    }

    return forward(operation)
})

export default link

@nikitamarcius 위에 해결 방법을 게시했습니다. 관찰 가능한 항목을 살펴보세요.

토큰을 업데이트할 수 없습니다. 작업 예제를 제공한 사람이 있습니까?

@ Ramyapriya24 여기에 내가 사용하는 코드가 있습니다.

import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
import { setContext } from '@apollo/link-context';
import AuthService from 'services/auth-service' // this is my implementation

const asyncAuthLink = setContext(async () => {
    // this is an async call, it will be done before each request
    const { token } = await AuthService.getCredentials();
    return {
      headers: {
        authorization: token
      },
    };
  },
);

const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql',
});

export const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  link: asyncAuthLink.concat(httpLink),
});

@adrianolsk 작성된 서비스 코드를 제공할 수 있습니까?

import AuthService from 'services/auth-service' // 이것은 내 구현입니다.
const { 토큰 } = AuthService.getCredentials()를 기다립니다.

서비스를 가져오려고 할 때 오류가 발생합니다.

그것이 내 서비스입니다. 그것은 react-native에서 AsyncStorage를 읽습니다. 그래서 로그인 후 거기에 값을 설정하고 각 요청 전에 코드가 정보를 가져오고 헤더에 설정하면 동일한 작업을 수행하거나 localStorage를 사용할 수 있습니다. 웹에 있습니다.

사용하려는 정보를 어디에 저장하고 있습니까?

당신은 이것을 사용할 수 있습니다

//save the token after login or when it refreshes
localStorage.setItem('token', yourToken);

그리고 그것을 사용

const asyncAuthLink = setContext(() => {
    // grab token from localStorage
    const token = localStorage.getItem('token');
    return {
      headers: {
        authorization: token
      },
    };
  },
);

@adrianolsk 설명 감사합니다만 각도를 사용하고 있습니다. grapqh.module.ts 파일에서 서비스를 가져올 수 없습니다. 서비스를 사용할 때 오류가 발생합니다.

클래스와 생성자를 사용하지 않고 module.ts 파일에서 서비스를 사용하는 방법을 아는 사람이 있습니까?

감사 해요

비동기 새로 고침 토큰에 fromPromise 를 사용하려고 합니다.
기본적으로 이 게시물 의 세 번째 상자를

토큰을 성공적으로 가져오고 저장하고 있지만 catch 또는 filter 또는 flatMap 호출되지 않습니다. 이것을 디버깅하는 방법을 잘 모르겠으므로 몇 가지 제안이 도움이 될 것입니다.

if (token && refreshToken) {
  return fromPromise(
    getNewToken(client)
      .then(({ data: { refreshToken } }) => {
        console.log("Promise data: ", refreshToken);
        localStorage.setItem("token", refreshToken.token);
        localStorage.setItem("refreshToken", refreshToken.refreshToken);
        return refreshToken.token;
      })
      .catch((error) => {
        // Handle token refresh errors e.g clear stored tokens, redirect to login, ...
        console.log("Error after setting token: ", error);
        return;
      })
  )
    .filter((value) => {
      console.log("In filter: ", value);
      return Boolean(value);
    })
    .flatMap(() => {
      console.log("In flat map");
      // retry the request, returning the new observable
      return forward(operation);
    });
}

@adrianolsk : 그 접근 방식은 토큰이 만료되기 전에도 항상 새로고침하는 것 같습니다. 일부 인증 서비스(예: Auth0의 checkSession )의 경우 모든 GraphQL 요청에 대해 불필요한 Auth0 서버 왕복을 만듭니다.

비동기 새로 고침 토큰에 fromPromise 를 사용하려고 합니다.
기본적으로 이 게시물 의 세 번째 상자를

토큰을 성공적으로 가져오고 저장하고 있지만 catch 또는 filter 또는 flatMap 호출되지 않습니다. 이것을 디버깅하는 방법을 잘 모르겠으므로 몇 가지 제안이 도움이 될 것입니다.

if (token && refreshToken) {
  return fromPromise(
    getNewToken(client)
      .then(({ data: { refreshToken } }) => {
        console.log("Promise data: ", refreshToken);
        localStorage.setItem("token", refreshToken.token);
        localStorage.setItem("refreshToken", refreshToken.refreshToken);
        return refreshToken.token;
      })
      .catch((error) => {
        // Handle token refresh errors e.g clear stored tokens, redirect to login, ...
        console.log("Error after setting token: ", error);
        return;
      })
  )
    .filter((value) => {
      console.log("In filter: ", value);
      return Boolean(value);
    })
    .flatMap(() => {
      console.log("In flat map");
      // retry the request, returning the new observable
      return forward(operation);
    });
}

오류의 원인이 무엇인지 찾았습니다. 위의 코드에서는 볼 수 없지만 map 함수를 사용하여 각각의 결과 오류를 매핑했습니다. 이로 인해 onError 이 아무 것도 반환하지 않고 관찰 가능 개체가 토큰 갱신 작업에 등록되지 않았습니다.

꽤 혼란스럽고 그것을 알아내는 데 너무 오래 걸렸습니다. 저를 도와주신 블로그 포스트 작성자에게 감사드립니다.

ERROR Error: Network error: Cannot read property 'length' of null

@WilsonLau0755 , 나는 같은 문제가있었습니다. 모든 null 헤더를 빈 문자열 '' 로 설정하여 해결했습니다.

onError를 async await와 함께 사용할 수 없는 이유는 무엇입니까?