Interfaces

Home / Dashboard

Mediante el endpoint /login se crea el token JWT en la cookie "token". Cuando entro al dashboard ejecuto una funcion de javascript que verifica que exista un token y devuelve el user_id para comprobar que es un usuario logueado. De esta manera evito poder ingresar por la url sin estar logueado.

Esto lo agrego mediante un bloque de HTML personalizado en Wordpress, dentro de una etiqueta script claro.

function verifyToken() {
  // Obtengo el token del localStorage
  const token = localStorage.getItem("token");

  // Si no hay token, redirigir al login
  if (!token) {
    window.location.href = "http://localhost/wordpress/index.php/loguearme/";
    return;
  }

  // Si hay token, decodificarlo para obtener el user_id (opcional)
  try {
    // Decodificar el payload del JWT, es decir, la segunda parte del token, lo que se encuentra luego del punto
    const payload = JSON.parse(atob(token.split(".")[1]));

    const user_id = payload.user_id; // del payload obtengo el userid

    console.log("Usuario logueado con ID: ", user_id);
  } catch (error) {
    showAlert("Token inválido: " + error, "danger");

    console.error("Token inválido:", error);

    localStorage.removeItem("token");

    window.location.href = "http://localhost/wordpress/index.php/loguearme/";
  }
}

Aparte, agrego fuera de esta función, la llamada a la misma, con un retardo, para que el token se alcance a almacenar. Si esto no está, la pagina no detecta que haya un token a pesar de que estes logueado con las credenciales adecuadas. Adapte el tiempo a su gusto.

// Llamo a la función cuando se carga la página

// Esperar 1,5 segundos antes de verificar el token para asegurar el mismo ya se haya almacenado

window.onload = function () {

setTimeout(verifyToken, 1500);

};```


Además muestro el menú principal que te lleva a las tres acciones: "Añadir contraseña", "Mis contraseñas", "Ayuda". Cada una te redigirá a su página correspondiente.

Por último, un botón para cerrar la sesión, que lo que hace es eliminar el token JWT y redirigirte al login.

```javascript
async function logoutUser() {
document

	.getElementById("logoutButton")

	.addEventListener("click", function () {

		// Borrar el token del localStorage

		localStorage.removeItem("token");

		// Redirigir a la página de inicio o login

		window.location.href = "http://localhost/wordpress/index.php/";

	});
}