Soy nuevo en Vue. Estoy tratando de construir una especie de middleware donde pueda verificar todos los códigos de estado y manejar la espera que quiero.

Quiero usar esta función en todos los lugares donde envíe una solicitud al backend. Para evitar la duplicación de código, estoy usando una función de middleware.

la función:

 module.exports.serverErrorMiddleware = async (res)=>{ const status = res.status; if(status == 500) return router.push('/error') //problem 1 if(status == 404) return router.push('/notfound') if(status == 302) return router.push('/login') if(status == 403 && !(res.error.isrefTokenError)) return router.push('/unauthorized') if(status == 400) this.error = res.error.message // problem 2 if(status == 401){ if(!localStorage.getItem('refresh_token')) return router.push('/login') try{ const response = await axios({ method : 'get', url : 'http://localhost:5000/api/auth/newtoken' }) localStorage.setItem('access_token' , response.auth.accessToken); }catch(err){ if(err.response.status == 403 && err.response.error.isrefTokenError) return router.push('/login'); router.push('/error') } } }

Problema 1: Quiero insertar una nueva ruta en el router para redireccionamientos, pero no sé cómo acceder al router .

problema 2: quiero cambiar los data en el componente Vue de esta función. Quiero mostrar el error al usuario según el error que recibo del servidor. Así que quiero acceder a la propiedad de error en los data del componente desde el que se llama a esta función.

Llamo a esta función en la solicitud de catch de axios

 async submitForm(event){ event.preventDefault() try{ const response = await axios({ method : 'post', url : 'http://localhost:5000/api/auth/register', data : { username : this.formData.username, password : this.formData.password } }) console.log(response) }catch(err){ serverErrorMiddleware(err.response) } }