Hola buenas tardes tengo una app en Vue

[jade glade]

axios como tal debe de retornar el status code de la peticion, aca esta la informacion de como obtener el status code desde un catch
https://github.com/axios/axios#handling-errors

[warm prawn]

Ok ya lo miro.

[jade glade]

dale ahi nos dices si lo lograste 😄

[rigid compass]

yo le pongo asi para capturar los errores 500:

} catch (e) {
  if (e.response.status === 500) {

[warm prawn]

Consigo capturar el error correctamente, pero me manda el error por consola igual.

[rigid compass]

Si, el error por consola afuerza lo va a mandar

[warm prawn]

¿No hay forma de evitarlo?

[rigid compass]

Sigue siendo un error en el protocolo, lo que hacemos es cacharlo de nuestro lado para interpretarlo y hacer algo en consecuencia

lo que si te aconsejo es lo siguiente

si usas vuex o pinia metelo ahi para llamar el autologueo cuando lo necesites

Tambien te recomiendo lo siguiente, asi puedes mandar por defult el token y no necesitas meterlo en cada llamada a axios
axios.defaults.headers.common.Authorization = Bearer ${token}

Y ese lo metes dentro del metodo para hacer la llamada a la sesion

[jade glade]

@warm prawn si no quieres estar validando el token prueba con lo que se llama Refresh JWT asi pues los tokens se refrescan en el Servidor/Back-End y es "casi que transparente" para el Front-End
Tambien puedes delegar la logica de Autenticacion a otra herramienta, ya que crear una por cuenta propia es algo complejo y requiere mucho conocimiento OWASP
puedes usar supabase o bien okta o alguna otra, que tenga un free tier para que hagas pruebas y determines cual es la mejor

[warm prawn]

mmm interesante, ¿eso iria en la configuración de axios?.

[rigid compass]

Lo puedes mandar en cualquier momento para reasignar el valor

[warm prawn]

Ya veo, pues voy a investigar a ver que tal, entiendo que estas herramientas del front son independientes del framework que uses cierto, solo tengo que buscar la versión para vue.

[warm prawn]

mmm vale, entonces antes de la llamada lo coloco y automaticamente se incerta en la cabezera Authorization ¿cierto?.

[jade glade]

correcto, queda en la instancia default de Axios, entonces asignandolo 1 vez, queda en todas las llamadas para la instancia default
recuerda que en Axios puedes tener tantas instancias como las necesites https://github.com/axios/axios#creating-an-instance

[warm prawn]

mmm entiendo es como si se cargara la instancia con la cabecera y el token por defecto, está muy bueno eso, ya que tengo muchos metodos regados donde obtengo el token del local storage y para mandarlo en la llamada. Muchas gracias por la información voy a implementarlo.

Otra pregunta amigo, ¿como podría hacer para mostrar los errores y mensajes en pantalla, seria buena idea hacerlo con un modal o hay alguna librería para vue con la que lo pueda hacer?

[rigid compass]

yo en mi caso como uso quasar ocupo el plugin de notify que puede generar tanto un mensaje tipo alert o tambien un modal

Este aparece en la ubicacion que deseas, puedes usar algo similar, o si quieres darle un poco mas de estilo puedes ocupar sweetalert2:
Pagina oficial
https://sweetalert2.github.io/

Ya solo lo importas:

import swal from 'sweetalert2'
swal.fire({
  icon: 'error',
  title: 'Error del servidor, intenta mas tarde',
  showConfirmButton: false,
  timer: 1500
})

[warm prawn]

Ok muchas voy a ver que tal, muchas gracias.

[rigid compass]

Vue es muy simple, pero hay detallitos que te detienen, siempre es bueno preguntar, se aprende demasiado de como lo hacen otras personas y te ayudan a mejorar tu forma de programar

[warm prawn]

¿Para usar Quasar es necesario instalarlo?, es que no encuentro la parte donde dice como se hace la instalación.

[rigid compass]

Si, se instala con yarn

o npm

[warm prawn]

Comparado con php es el cielo. ahora mismo estoy con un proyecto de la universidad y me toca usar jquery para mandar peticiones ajax.

Y es un rollo el tema de la asincronia.

[rigid compass]

cuando aprendes vue, te das cuenta de que lo que haces con jquery lo haces con menos lineas aqui y mucho mas rapido, solo que para algunas cosas si requieres saber mas javacript

yo llevo poco tiempo usando vue y la verdad ya casi deje de usar jquery, lo ocupo solo para proyectos viejos que a fuerza debo de seguir asi, pero ahora con los nuevos implemento vue

no te aconsejo meterte con quasar, esta muy simple, pero si es para cosas simples, mejor sigue como vaz para acabar

[warm prawn]

mmm, ok voy a probar con sweetalert2 ya que lo estoy utilizando en el proyecto de la uni pero tuve que descargarlo por que importarlo en el proyecto era un rollo no me dejaba.

[rigid compass]

que raro

[warm prawn]

Lo intente con los imports de ecmascript modules y nada, luego con common js y nada, no se que pasaba a lo mejor era por php no lo se la verdad.

Como estoy corriendo el proyecto en un servidor de apache usado el xampp, una cosa super rara, jajaja

[rigid compass]

eso no deberia de afectar

ahi si no se como apoyarte

[warm prawn]

Nah no pasa nada, me anda bien el sweetalert solo que tuve que mandar todos los archivos al repositorio y no quería.

https://github.com/jhobahego/proyecto-final-lengpro3

[rigid compass]

perfecto

hechale ganas, cualquier cosa aqui andamos