4ce2bbf823
## 概要 [Task: 1471](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/OMDSDictation/_sprints/taskboard/OMDSDictation%20%E3%83%81%E3%83%BC%E3%83%A0/OMDSDictation/%E3%82%B9%E3%83%97%E3%83%AA%E3%83%B3%E3%83%88%203-2?workitem=1471) - アクセストークンの自動更新処理を実装 - UpdateTokenTimerで定期実行を行う - 未ログインまたはトークンが期限切れの状態で、ログイン後の画面にアクセスした場合、Topページにリダイレクトする処理を実装 - RouteAuthGuard.tsx - APIからのレスポンスが401だった時にTopページにリダイレクトする処理を実装 - App.tsx ## レビューポイント - 今の実装だとトークンの自動更新に失敗した場合、画面上では何も起こらないようにになっている - 更新が失敗し続け、アクセストークンが切れた段階でRouteAuthGuardではじかれてTopへリダイレクトする - トークンの期限を確認する間隔を3分にしているが問題なさそうか ## UIの変更 - ## 動作確認状況 - ローカルで動作確認 ## 補足
23 lines
549 B
TypeScript
23 lines
549 B
TypeScript
import { useRef, useEffect } from "react";
|
|
|
|
export const useInterval = async (
|
|
callback: () => Promise<void>,
|
|
interval: number
|
|
) => {
|
|
const callbackRef = useRef<() => Promise<void>>(callback);
|
|
useEffect(() => {
|
|
callbackRef.current = callback;
|
|
}, [callback]);
|
|
|
|
useEffect(() => {
|
|
const updateToken = async () => {
|
|
await callbackRef.current();
|
|
};
|
|
const id = setInterval(updateToken, interval);
|
|
return () => {
|
|
clearInterval(id);
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
};
|