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);
+     const { token, refreshToken } = api.getState().authData;
-     // if (refreshResult.data) {
+     const refreshResult = await baseQuery(
-     //     // store the new token
+      {
-     //     api.dispatch(tokenReceived(refreshResult.data));
+       url: '/token/renew',
-     //     // retry the initial query
+       method: 'POST',
-     //     result = await baseQuery(args, api, extraOptions);
+       body: {
-     // } else {
+        token,
-     //     api.dispatch(loggedOut());
+        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,14 +1,14 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
  user: null,
  usersVersion: null,
  afterMid: null,
  token: null,
-  refreshToken: null,
+ refreshToken: null
 };
 const authDataSlice = createSlice({
-  name: "authData",
+ name: 'authData',
  initialState,
  reducers: {
   setAuthData(state, action) {
@@ -18,7 +18,7 @@ const authDataSlice = createSlice({
    state.refreshToken = refresh_token;
   },
   clearAuthData(state) {
-      console.log("clear auth data");
+   console.log('clear auth data');
    state.user = null;
    state.token = null;
    state.refreshToken = null;
@@ -27,6 +27,12 @@ const authDataSlice = createSlice({
    // 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;
@@ -34,13 +40,9 @@ const authDataSlice = createSlice({
   setAfterMid(state, action) {
    const { mid } = action.payload;
    state.afterMid = mid;
-    },
+  }
-  },
+ }
 });
-export const {
+export const { updateToken, setAuthData, clearAuthData, setUsersVersion, setAfterMid } =
-  setAuthData,
+ authDataSlice.actions;
-  clearAuthData,
-  setUsersVersion,
-  setAfterMid,
-} = authDataSlice.actions;
 export default authDataSlice.reducer;