Как автоматически обновлять токен доступа при получении 403 ошибок в Redux Toolkit Async Thunks? ⇐ Javascript

[Anonymous]

Я строю приложение React с Redux Toolkit и должен автоматически обрабатывать токен. Когда истекает мой токен доступа, сервер возвращает ошибку 403, и я хочу автоматически обновить токен и повторить исходный запрос. Сервер ожидает токена доступа в заголовке авторизации. Мой токен доступа сохраняется в памяти Redux (state.auth.accesstoken). Вот мой текущий код: < /p>


import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

const url = import.meta.env.VITE_APP_SERVER_URL;

// Thunk to add to favourites
export const addToFavouritesThunk = createAsyncThunk(
'favourites/add',
async (dishId, { rejectWithValue, getState }) => {
try {
const { auth: { accessToken } } = getState();
const response = await axios.post(
`${url}favourites`,
{ dishId },
{
headers: {
'Authorization': `Bearer ${accessToken}`
}
}
);
return response.data;
} catch (error) {
return rejectWithValue(
error.response?.data?.message || 'Failed to add to favourites'
);
}
}
);

// Thunk to get all favourites
export const getFavouritesThunk = createAsyncThunk(
'favourites/getAll',
async (_, { rejectWithValue, getState }) => {
try {
const { auth: { accessToken } } = getState();
const response = await axios.get(
`${url}favourites`,
{
headers: {
'Authorization': `Bearer ${accessToken}`
}
}
);
return response.data;
} catch (error) {
return rejectWithValue(
error.response?.data?.message || 'Failed to get favourites'
);
}
}
);

// Thunk to remove from favourites
export const removeFromFavouritesThunk = createAsyncThunk(
'favourites/remove',
async (dishId, { rejectWithValue, getState }) => {
try {
const { auth: { accessToken } } = getState();
const response = await axios.delete(
`${url}favourites/${dishId}`,
{
headers: {
'Authorization': `Bearer ${accessToken}`
}
}
);
return response.data;
} catch (error) {
return rejectWithValue(
error.response?.data?.message || 'Failed to remove from favourites'
);
}
}
);

// Refresh token thunk (simplified version)
export const refreshTokenThunk = createAsyncThunk(
'auth/refresh',
async (_, { rejectWithValue, getState }) => {
try {
const { auth: { refreshToken } } = getState();
const response = await axios.post(
`${url}auth/refresh`,
{ refreshToken }
);
return response.data; // Contains new accessToken
} catch (error) {
return rejectWithValue(
error.response?.data?.message || 'Token refresh failed'
);
}
}
);

const favouritesSlice = createSlice({
name: 'favourites',
initialState: {
items: [],
loading: false,
error: null,
lastAction: null
},
reducers: {
clearFavouritesError: (state) => {
state.error = null;
},
resetLastAction: (state) => {
state.lastAction = null;
}
},
extraReducers: (builder) => {
builder
// Add to favourites
.addCase(addToFavouritesThunk.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(addToFavouritesThunk.fulfilled, (state, action) => {
state.loading = false;
state.items = action.payload;
state.lastAction = { type: 'add' };
})
.addCase(addToFavouritesThunk.rejected, (state, action) => {
state.loading = false;
state.error = action.payload;
})
// Get all favourites
.addCase(getFavouritesThunk.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(getFavouritesThunk.fulfilled, (state, action) => {
state.loading = false;
state.items = action.payload.favourites || [];
})
.addCase(getFavouritesThunk.rejected, (state, action) => {
state.loading = false;
state.error = action.payload;
})
// Remove from favourites
.addCase(removeFromFavouritesThunk.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(removeFromFavouritesThunk.fulfilled, (state, action) => {
state.loading = false;
state.items = action.payload;
state.lastAction = { type: 'remove' };
})
.addCase(removeFromFavouritesThunk.rejected, (state, action) => {
state.loading = false;
state.error = action.payload;
});
}
});

export const { clearFavouritesError, resetLastAction } = favouritesSlice.actions;
export default favouritesSlice.reducer;< /code>
< /div>
< /div>

Проблема
Когда истекает токен доступа, мой сервер возвращает ошибку 403. Я хочу автоматически:
Обнаружение 403 ошибок в любом thunk
call represhtokenthunk, чтобы получить новый токен доступа
Повторите исходный запрос с новым токеном
Запросы оправдан>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -redux-too