Is there a solution for utilizing axios interceptors with NextJS 13? It seems like it should be simple, but I'm struggling to make it work.
Here's a basic client component:
"use client"
import React, {useState} from 'react'
import axiosInterceptorInstance from '@/lib/request'
interface Device {
...
}
export default function DevicesHolder() {
const [devices, setDevices] = useState<Device[]>([])
axiosInterceptorInstance.get('/api/v1/staff-admin/devices?page=1&itemsPerPage=20').then((res) => {
setDevices(res.data.data)
})
return (
<>
{devices.map((device, key) => (
<div key={key}>
<h1>{device.imei}</h1>
</div>
))}
</>
)
}
And this is the axios interceptor code:
import axios from "axios";
import { redirect } from 'next/navigation'
const axiosInterceptorInstance = axios.create({
baseURL: process.env.NEXT_PUBLIC_API_BASE_URL, // Replace with your API base URL
});
axiosInterceptorInstance.interceptors.response.use(
(response) => {
// Modify the response data here
return response;
},
(error) => {
// Handle response errors here
// if unathorized, redirect to login
console.log("server", typeof window === 'undefined')
if (error.response.status === 401) {
redirect('/login')
}
return Promise.reject(error);
}
);
export default axiosInterceptorInstance;
The request is being sent both on the server and the client. However, redirection fails on both ends and throws a NEXT_REDIRECT error. Any thoughts?
Edit 1: I attempted using window.location.href, which resulted in an error when running on the server.