Ionic 4 con JWT Spring Boot y MySql. Capítulo 3: Login y Menú

Modelos:

Para el login necesitamos primero crear dos clases, JwtModel y LoginUsuario, que irán, respectivamente en los archivos jwt-model.ts y login-usuario.ts, dentro de la carpeta models.

Servicios:

Vamos a editar el archivo token.service.ts, dentro de la carpeta services. Va a quedar exactamente igual que en el tutorial del frontend de Angular:

Y en el auth.service.ts implementamos el método login, que devuelve un Observable tipo JwtModel:

Login pages:

Una vez que tenemos implementados los servicios vamos al archivo login.page.ts, en la carpeta pages/login. Este es el código:

En el método onInit se imprimen por pantalla los valores del token, pero sólo en el caso de estar logueados.
En el método onLogin creamos un nuevo objeto tipo LoginUsuario a partir de los valores del formulario; dicho objeto será pasado como parámetro al authService. Si todo va bien se pasan los valores del token a este servicio; en caso contrario, se mostrará un mensaje de error por medio del método asíncrono presentAlert.

La vista de la página -el archivo login.page.html– es esta:

A las imágenes le hemos añadido estilos en el archivo login.page.scss:

Según estemos logueados o no, se presentará un div u otro. En caso afirmativo, se mostrará el botón del menú en la parte superior, así como el botón de cierre de sesión. Si no estamos logueados se muestra el formulario y el enlace a la página de registro. Si iniciamos sesión se mostrarán por consola los valores del token:

tokenConsole

Menú:

Para finalizar esta entrada vamos a modificar los archivos app.component.ts y app.component.html para que aparezca el menú. Mientras no se haya iniciado sesión el menú estará inhabilitado. Se presentarán distintos botones según el rol de usuario. Lo primero, el app.component.ts:

En el inicio se comprueba si se ha iniciado sesión para inhabilitar/habilitar el menú. En caso afirmativo también se comprueba si el usuario es administrador o no por medio de la variable booleana isAdmin. En el logout se redirige al usuario a la página de inicio, que es la del login.

La vista es el archivo app.component.html:

Es muy simple, sólo hay que comprobar si el usuario está logueado y si es administrador.

En la siguiente entrada desarrollaremos el panel de usuario.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s