From 732c0ea8e2d1ba840221c90e47120d6cc159f87f Mon Sep 17 00:00:00 2001 From: zerosoul Date: Thu, 17 Feb 2022 10:16:45 +0800 Subject: [PATCH] refactor: renew while 401 --- src/app/services/base.query.js | 34 ++++++++++----- src/app/slices/auth.data.js | 80 +++++++++++++++++----------------- 2 files changed, 65 insertions(+), 49 deletions(-) diff --git a/src/app/services/base.query.js b/src/app/services/base.query.js index 6367e925..5d0ea715 100644 --- a/src/app/services/base.query.js +++ b/src/app/services/base.query.js @@ -1,5 +1,6 @@ import { fetchBaseQuery } from '@reduxjs/toolkit/query'; import toast from 'react-hot-toast'; +import { updateToken, clearAuthData } from '../slices/auth.data'; import BASE_URL, { tokenHeader } from '../config'; const whiteList = ['login', 'checkInviteTokenValid']; const baseQuery = fetchBaseQuery({ @@ -34,17 +35,30 @@ const baseQueryWithReauth = async (args, api, extraOptions) => { break; case 401: { - toast.error('token expired, please login again'); // try to get a new token with refreshToken - // const refreshResult = await baseQuery('/refreshToken', api, extraOptions); - // if (refreshResult.data) { - // // store the new token - // api.dispatch(tokenReceived(refreshResult.data)); - // // retry the initial query - // result = await baseQuery(args, api, extraOptions); - // } else { - // api.dispatch(loggedOut()); - // } + const { token, refreshToken } = api.getState().authData; + const refreshResult = await baseQuery( + { + url: '/token/renew', + method: 'POST', + body: { + token, + refresh_token: refreshToken + } + }, + api, + extraOptions + ); + console.log({ refreshResult }); + if (refreshResult.data) { + // store the new token + api.dispatch(updateToken(refreshResult.data)); + // retry the initial query + result = await baseQuery(args, api, extraOptions); + } else { + toast.error('token expired, please login again'); + api.dispatch(clearAuthData()); + } } break; diff --git a/src/app/slices/auth.data.js b/src/app/slices/auth.data.js index c80e20a8..f780e30c 100644 --- a/src/app/slices/auth.data.js +++ b/src/app/slices/auth.data.js @@ -1,46 +1,48 @@ -import { createSlice } from "@reduxjs/toolkit"; +import { createSlice } from '@reduxjs/toolkit'; const initialState = { - user: null, - usersVersion: null, - afterMid: null, - token: null, - refreshToken: null, + user: null, + usersVersion: null, + afterMid: null, + token: null, + refreshToken: null }; const authDataSlice = createSlice({ - name: "authData", - initialState, - reducers: { - setAuthData(state, action) { - const { user, token, refresh_token } = action.payload; - state.user = user; - state.token = token; - state.refreshToken = refresh_token; - }, - clearAuthData(state) { - console.log("clear auth data"); - state.user = null; - state.token = null; - state.refreshToken = null; - // 清掉本地缓存auth data - // localStorage.removeItem("AUTH_DATA"); - // state.afterMid = null; - // state.usersVersion = null; - }, - setUsersVersion(state, action) { - const { version } = action.payload; - state.usersVersion = version; - }, - setAfterMid(state, action) { - const { mid } = action.payload; - state.afterMid = mid; - }, + name: 'authData', + initialState, + reducers: { + setAuthData(state, action) { + const { user, token, refresh_token } = action.payload; + state.user = user; + state.token = token; + state.refreshToken = refresh_token; }, + clearAuthData(state) { + console.log('clear auth data'); + state.user = null; + state.token = null; + state.refreshToken = null; + // 清掉本地缓存auth data + // localStorage.removeItem("AUTH_DATA"); + // state.afterMid = null; + // state.usersVersion = null; + }, + updateToken(state, action) { + const { token, refresh_token } = action.payload; + console.log('refresh token'); + state.token = token; + state.refreshToken = refresh_token; + }, + setUsersVersion(state, action) { + const { version } = action.payload; + state.usersVersion = version; + }, + setAfterMid(state, action) { + const { mid } = action.payload; + state.afterMid = mid; + } + } }); -export const { - setAuthData, - clearAuthData, - setUsersVersion, - setAfterMid, -} = authDataSlice.actions; +export const { updateToken, setAuthData, clearAuthData, setUsersVersion, setAfterMid } = + authDataSlice.actions; export default authDataSlice.reducer;