Estoy tratando de crear una instancia de axios para no tener que escribir el encabezado de Autorización en cada solicitud. Estoy almacenando token de acceso en localStorage.

Intenté crear un archivo axiosInstance.ts

 import axios, { AxiosInstance } from "axios" const service = axios.create({ baseURL: "http://localhost:5000/", headers: { Authorization: localStorage && localStorage.getItem("token") ? `Bearer ${localStorage.getItem("token")}` : "", }, }) export default service

Pero arroja un error de localStorage is not defined .

Así que traté de hacer de este un gancho personalizado como este

useAxios.ts

 function useAxios() { const [axiosInstance, setAxiosInstance] = useState<null | AxiosInstance>(null) useEffect(() => { const service = axios.create({ baseURL: "http://localhost:5000/", headers: { Authorization: localStorage.getItem("token") ? `Bearer ${localStorage.getItem("token")}` : "", }, }) setAxiosInstance(service) }, []) return axiosInstance } export default useAxios

Y cuando traté de usarlo así, arrojó un error que dice que service.post is not a function

Entonces, cuando registro el service/axiosInstance , registra una promesa de solicitud de obtención en baseURL. No estoy seguro de lo que estoy haciendo mal.