Quiero verificar si el token está vencido en el lado del cliente.
Mi token está almacenado en localstorage.
Ahora lo que hago es: hago una llamada al servidor para comprobar si es valido pero solo lo hago cuando la ruta es: https:exp.com/
código:
useEffect(() => { verifyToken(auth.token).then((res) => { if (res.status !== 'success' && res.message === 'Token expired') { signoutClient(() => { router.push('/auth/login'); }); } }); }, [auth.token, router]); Ahora, el problema aquí es qué pasa si el usuario va directamente a otra URL exp: https:exp.com/helloworld
Estaba pensando en usar enchufes, pero no sé si podría funcionar.
La idea es: el cliente permanece en escucha, cada vez que el token caduca, el servidor emite un mensaje.
¿Alguna idea de cómo puedo hacerlo?
Hay diferentes técnicas.
Tenga en cuenta que el manejo del tiempo en dos máquinas diferentes (la caducidad en este caso) puede generar problemas debido a la fluctuación del tiempo o la desalineación del reloj, por lo que no es tan sencillo
Mi patrón favorito es tener un error de servidor dedicado.
Su servidor debería responder con un error particular cuando el token caduca (para distinguirlo del 401 Unauthorized debido al acceso al rol). Luego agrega un middleware HTTP a su cliente que:
/auth/login O si tiene un renew token :
JWT Este es un sistema pasivo que le permite tratar el JWT como una cadena oscura y no tiene problemas relacionados con el tiempo.
Si, por razones de seguridad, desea ocultar información sensible cuando la sesión caduca incluso cuando el usuario no está interactuando con la interfaz de usuario (como lo hacen los sitios bancarios), necesita saber cuándo caducará el token . Una técnica común es devolver el tiempo de vencimiento junto con el token (dentro de la respuesta de autenticación).
{ "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.JFDV4mOKKh0sMfkBKvsbvm8iWjHEGBXtPvC49ob3qiI", "expiresAt": 1234567890 }O mejor
{ "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.JFDV4mOKKh0sMfkBKvsbvm8iWjHEGBXtPvC49ob3qiI", "expiresIn": 600 }El primero le devuelve la hora UNIX de vencimiento del token en relación con la hora del servidor . Esto está sujeto a fluctuaciones de tiempo o desalineación del reloj (esto puede provocar errores). El segundo es mejor ya que le permite a la interfaz de usuario saber dentro de cuántos segundos (desde que se recibió la respuesta) caducará el token, esto se puede usar para calcular el tiempo de UNIX de acuerdo con el reloj local.
Es común eliminar un pequeño paso de tiempo de expiresAt y expiresIn para evitar problemas de inestabilidad y deriva del reloj.
Si no tiene otra solución, siempre puede analizar el JWT :
const JWT = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjEyMzQ1Njc4OTAsIm5hbWUiOiJKb2huIERvZSIsImlhdCI6MTUxNjIzOTAyMn0.1c_yQjnMZfKUb4UTDE_WvbC71f8xxtyMsdqKKkI1hF8`; const jwtPayload = JSON.parse(window.atob(JWT.split('.')[1])) console.log(jwtPayload.exp);Puede usar una lib (como jwt_decode ) para decodificar su token JWT, donde lo más probable es que contenga una marca de tiempo de caducidad que puede verificar (compárela con la marca de tiempo actual para este momento) y si excedió (caducó) simplemente elimínelo de local almacenamiento y redirigir al usuario a la página de inicio de sesión.
Pero también debe considerar agregar un bloque de catch para las funciones que llaman a su API para verificar que cualquier código de estado de respuesta 401 también haga lo mismo (en caso de que el token fuera válido, entonces, mientras el usuario se mueve, finaliza su fecha de vencimiento)