4

ReactJS RelayJS ネットワーク環境内で JWT 認証を使用しています。サーバーとクライアントでのトークンの取得と処理はすべて問題ありません。ルーティングにはreact router v4を使用しています。

私の問題は、Unauthorizedサーバーからメッセージを受信したときです (ステータス コード 401)。これは、トークンの有効期限が切れた後にユーザーがアプリケーション ページをポイントした場合に発生します。私がする必要があるのは、ログインページにリダイレクトすることです。これは私が望むコードです:

import { Environment, Network, RecordSource, Store } from 'relay-runtime';

const SERVER = 'http://localhost:3000/graphql';

const source = new RecordSource();
const store = new Store(source);

function fetchQuery(operation, variables, cacheConfig, uploadables) {
  const token = localStorage.getItem('jwtToken');

  return fetch(SERVER, {
    method: 'POST',
    headers: {
      Authorization: 'Bearer ' + token,
      Accept: 'application/json',
      'Content-type': 'application/json'
    },
    body: JSON.stringify({
      query: operation.text, // GraphQL text from input
      variables
    })
  })
    .then(response => {
      // If not authorized, then move to default route
      if (response.status === 401)
          this.props.history.push('/login') <<=== THIS IS NOT POSSIBLE AS THERE IS NO this.history.push CONTEXT AT THIS POINT
      else return response.json();
    })
    .catch(error => {
      throw new Error(
        '(environment): Error while fetching server data. Error: ' + error
      );
    });
}

const network = Network.create(fetchQuery);

const handlerProvider = null;

const environment = new Environment({
  handlerProvider, // Can omit.
  network,
  store
});

export default environment;

this.props.history.pushネットワーク環境は ReactJS コンポーネントではないため、プロパティが関連付けられていないため、当然呼び出しはできません。

この時点で、次のようなエラーをスローしようとしました。

      if (response.status === 401)
          throw new Error('Unauthorized');

しかし、ブラウザ コンソールにエラーが表示されました。これをコードで適切に処理することはできません。

401 エラーが発生した場合にログイン ページにリダイレクトしたいだけですが、適切な方法が見つかりません。

4

2 に答える 2