Comprobar token vivo en Ionic 2

Si está involucrado en aplicaciones híbridas, puede saber que Ionic Framework es una de las mejores soluciones para hacerlo. ¿Porqué es eso? Porque le ofrece una gran cantidad de componentes nativos y visuales reutilizables, como Cámara, Contactos, Geolocalización y más.

Ionic 2 es la evolución de Ionic Framework que usa Angular 2 como código central, pero estas son noticias viejas para usted. Lo que realmente sabes es que no hay demasiada documentación y cómo hacer algo de la nueva manera.

Uno de mis impedimentos fue verificar el token con vida. Todos los ejemplos usaban soluciones en la nube como Firebase o Auth0, pero ya tengo mi propio servidor con mi API desarrollada. Así que quería hacer la solución completa y revisar mi aplicación, pero ¿cómo?

Este fue mi caso de uso:

- Open the app and login in the form.
- Send to the server the user and password.
- The server response successful and return the JWT token with an expiration time.
- Navigate through the pages and check if the token is alive in any try.
- If token is not alive, redirect to the login page.

Para hacerlo, notará los eventos del ciclo de vida relacionados con el NavController, que le brinda ganchos cuando ingresa o sale de las páginas. Con esto, puede verificar antes de mostrar una nueva página, si el token está vivo y redirigir o hacer otra cosa si no lo está. Uno de ellos es la función IonViewCanEnter. Debe devolver un Booleano o una Promesa y es falso, . Hice una clase de componente heredable para hacer la función goToPage y la verificación del token:

import { NavController} from 'ionic-angular';
import { LoginPage } from '../pages/login/login';
import { LoginService } from '../providers/login-service';

export class SuperComponent {
   constructor(public loginService: LoginService, public navCtrl: NavController) { }
   protected goToPage(componentClass: any) {
       this.navCtrl.push(componentClass).catch(() => {
           //The push has failed
           this.navCtrl.setRoot(LoginPage);
       });
   }
   ionViewCanEnter() {
       return this.loginService.isAlive();
   }
}

Asumimos que this.loginService.isAlive() es un método que obtiene el token en el almacenamiento local, lo decodifica y verifica la fecha de vencimiento. Luego devuelve una promesa resuelta o rechazada.

Cuando inserta una página en NavController y falla, puede detectar esto y configurar LoginPage como root. El error se ejecuta cuando el ionViewCanEnter de la página enviada devuelve falso o una promesa rechazada.

Luego, debe extender la clase SuperComponent en las páginas que desea controlar, inyectando LoginService y NavController:

import { Component } from '@angular/core';
import { NavController} from 'ionic-angular';
import { SuperComponent } from '../../shared/supercomponent';
import { ContactPage } from '../contact/contact';
import { LoginService } from '../../providers/login-service';

@Component({
 selector: 'page-home',
 templateUrl: 'home.html'
})

export class HomePage extends SuperComponent{

 constructor(public navCtrl: NavController, public loginService: LoginService) {
   //Injecting to the Supercomponent
   super(loginService, navCtrl);
 }

 goToContactPage(){
   this.goToPage(ContactPage);
 }
}

Cuando el vínculo activa el método goToContactPage, utiliza el método heredado goToPage. La página de contacto también debe extender el supercomponente para enganchar el ionViewCanEnter.

Otra opción completa para las aplicaciones móviles es almacenar las credenciales en un almacenamiento seguro e intentar iniciar sesión automáticamente cuando el token haya caducado o usar un token de actualización como OAuth2. Esto se debe a que las aplicaciones móviles deben registrarse una vez y no cada vez. Pero, no use un token único y no caducable, esta es una idea mala y pirateable.

Similar Posts

Leave a Reply

Your email address will not be published.