Interface returns 401 will enter the onResponseError function, onResponseError inside the token will be refreshed and resend the request, but no matter what the result of this function returns the request handler will receive the request.
export default defineNuxtPlugin((nuxtApp) => {
const settings = useSettings();
const api: ReturnType<typeof $fetch.create> = $fetch.create({
onResponseError: async ({ request, options, error, response }) => {
const route = useRoute();
let data = response._data;
if (response.status === 401) {
const result = await api("/api/auth/refreshToken");
if (result.success) {
return api(request, options);
} else {
await nuxtApp.runWithContext(() =>
navigateTo(`/login/?redirectUri=${route.fullPath}`, { replace: true }),
);
}
} else {
const toast = useToast();
toast.add({
color: "red",
title: `${response.status} ${response.statusText}`,
description: data.message,
icon: "i-heroicons-x-mark-20-solid",
});
}
return Promise.reject(response._data);
},
});
return {
provide: {
api,
},
};
});
How to do a senseless refresh with ofetch in nuxtjs?