refactor: renew while 401

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;

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;