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の変更 - ## 動作確認状況 - ローカルで動作確認 ## 補足
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { createAsyncThunk } from "@reduxjs/toolkit";
|
|
import { RootState } from "app/store";
|
|
import { AuthApi } from "../../api/api";
|
|
import { Configuration } from "../../api/configuration";
|
|
import { setToken } from "./authSlice";
|
|
|
|
export const updateTokenAsync = createAsyncThunk<
|
|
{
|
|
/* Empty Object */
|
|
},
|
|
void,
|
|
{
|
|
// rejectした時の返却値の型
|
|
rejectValue: {
|
|
/* Empty Object */
|
|
};
|
|
}
|
|
>("auth/updateTokenAsync", async (args, thunkApi) => {
|
|
// apiのConfigurationを取得する
|
|
const { getState } = thunkApi;
|
|
const state = getState() as RootState;
|
|
const { configuration, refreshToken } = state.auth;
|
|
const config = new Configuration(configuration);
|
|
const authApi = new AuthApi(config);
|
|
|
|
try {
|
|
const { data } = await authApi.accessToken({
|
|
headers: { authorization: `Bearer ${refreshToken}` },
|
|
});
|
|
// アクセストークン・リフレッシュトークンをlocalStorageに保存
|
|
thunkApi.dispatch(
|
|
setToken({
|
|
accessToken: data.accessToken,
|
|
refreshToken: state.auth.refreshToken,
|
|
})
|
|
);
|
|
|
|
return {};
|
|
} catch (e) {
|
|
return thunkApi.rejectWithValue({});
|
|
}
|
|
});
|