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