programador

iván albizu

Main Blog

Blog

Angular consumiendo de WordPress Rest Api – Trabajando con usuarios

Angular consumiendo de WordPress Rest Api

En esta entrada es continuación de dos entradas anteriores sobre WordPress y Angular, Autenticación con JWT y CRUD con entradas de WordPress. En esta ocasión sólo voy a obtener el usuario actualmente autenticado y permitir edición de algunos campos de su perfil. Podría mejorarse el tratamiento de las páginas que puede ver un usuario, como por ejemplo no mostrar toda la navegación ni mostrar la página de login si ya está Autenticado. No me extenderé mucho ya que muchas cosas son comunes y repetitivas en mis anteriores publicaciones. (Al final de la entrada he publicado un vídeo y el repositorio en Git Hub).

Vamos a realizar:

  • Obtener el usuario autenticado.
  • Habilitar al usuario la edición de algunos de sus datos.

Cuando la ruta sea ‘/user’ usaremos la vista ‘views/user.html’ y el controlador ‘UserCtrl’

Obtener el usuario autenticado

El método getCurrentUser() del controlador ‘UserCtrl’ obtendrá (caso de existir) el token almacenado en el LocalStorage del navegador y lanzará la petición a la factoría getCurrentUserData del archivo ‘users.services.js’ para obtener los datos del usuario y guardarlo en user: ‘vm.user = dataResponse;’ añadiendo una nueva variable ‘vm.login = 3’ para mostrar o no usando la directiva ‘ng-show’ en la vista.

En el archivo ‘users-services.js’ tenemos dos métodos para obtener el usuario getUserId() y getCurrentUserData().

El método getUserId() decodificará el Json Web Token (JWT) para devolver la id del usuario.

Para más información podemos visitar la web https://jwt.io y trastear un poco.

Por ejemplo, he obtenido el token generado imprimiendo en el método anterior ‘console.log(base64);’ y lo he copiado en la web anterior, y me ha dado la ID de usuario 1:

JWT Json Web Token

El otro método, getCurrentUserData(), devolverá los datos del usuario al controlador haciendo petición GET a la URL de la Api de WordPress ‘URL_API.BASE_URL + ‘/wp/v2/users/’ + user_id’.

Edición de un usuario

Los datos que el usuario puede editar son su nombre, descripción (biografía) y link (link personalizado, no el link propio a su perfil de WordPress).

La petición a la Rest de Api de Wordress se realizará con el método editUserData(data, id) del servicio ”UserServices’ mediante POST pasando como parámetro los campos editados y la ID del usuario.

En el controlador UserCtrl contiene el método editUser(data, id) que lanza la petición al servicio tras obtener en la vista los campos editados y la Id del usuario, refrescando la vista con la llamada getCurrentUser() si la petición fue correcta.

Configurando la vista

La vista es mostrada al usuario en ‘views/user.html’. Las etiquetas html usadas son de un formulario. Por defecto los campos el formulario aparecen deshabilitados mediante la directiva ‘ng-disabled = !vm.enable’.

Se usa una variable ‘enable’ para controlar estados. Al cargar el controlador por defecto enable toma el valor ‘false’.

Existe tres botones. Uno de ellos habilita la edición del formulario. Los otros dos (Cancelar y Guardar) se muestran cuando se ha seleccionado el primero (en este caso, el primer botón se oculta). Según los diferentes casos se opera con la variable cambiando su valor.

Git Hub

En siguientes entradas me gustaría poder practicar con Custom Post Types. Añadiendo mi propio tipo de entrada y habilitarla para la Rest Api.

Esta entrada tiene 0 comentarios

Deja un comentario





Time limit is exhausted. Please reload CAPTCHA.