No estoy seguro de cómo realizar correctamente la autenticación JWT en el front-end, aunque no tuve casi ningún problema en el back-end.
con Javascript no pasé demasiado de este fragmento ya que tuve que rehacer cosas muchas veces y no funcionó de todos modos
const submit = async (e) => { e.preventDefault(); await axios('http://localhost:8080/api/login', { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, credentials: 'include', data:new URLSearchParams(`username=${username}&password=${password}`) }); }Que básicamente solo muestra los tokens de acceso y actualización en la información de red de la página.
¿Cómo identifico realmente al usuario en un sitio web a partir de ahí y puedo usar los propios datos del usuario, como archivos, por ejemplo?
Solo necesito poder identificar al usuario, todos sus datos, como información de perfil, fotos, etc., y que el usuario solo pueda acceder a sus propios datos.
Los JWT se utilizan para codificar qué acciones puede realizar el usuario y qué páginas ver. Por ejemplo, podría codificar su rol dentro del token para indicar a qué pueden acceder. Para recuperar sus datos, como información de perfil, fotos, etc., debe enviar información adicional, probablemente la identificación del usuario, o debe codificar el campo de identificación dentro del token que no está allí de manera predeterminada.
Ya tienes lo que necesitas. los tokens de acceso y actualización son los necesarios para las rutas que requieren autorización. El token tiene los detalles del usuario que los identifica con el back-end que está realizando solicitudes. después de iniciar sesión, guarda el token en el navegador y, siempre que el token sea válido, el usuario inicia sesión. El token se envía junto con las solicitudes que necesitan autorización para acceder como un encabezado como este, digamos para obtener el perfil completo del usuario, necesitamos han iniciado sesión ->
axios(' api/user/profile ', { method: 'POST', headers: {'Content-Type': 'application/json,'Authorization':'Bearer' + localStorage.getItem('user-token')}, }); .