Ionic3 Interceptor HTTP + Auth Token JWT

Epale, ¿Cómo estás?. Hoy te voy a explicar como hacer un interceptor en ionic3 de tal forma que puedas ejecutar código antes de enviar la peticion HTPP o despues.

Esto nos ahorra un montón de trabajo de tareas repetitivas como enviar el Token JWT cuando el usuario este conectado (El ejemplo es de este caso). Es una solución bastante cómoda y puedes adaptarla a tus necesidades por ejemplo un 401 y redireccionar al login con esta clase puedes hacer esa tarea de forma global, así que Manos a la obra!

Requisitos:

Primero crea un archivo en tu proyecto y copia el siguiente snippet:

interceptor-http.ts

Luego ve a tu app.module.ts donde le diremos a ionic que usaremos nuestra librería en lugar de la http (con calma que nuestra librería lo que hace es heredar de la de ellos)

app.module.ts

import { Http, XHRBackend, RequestOptions } from '@angular/http';
import { Storage } from '@ionic/storage';
// coloquen la ruta donde hayan guardado el archivo.
import { HttpProvider } from '../providers/http/http';
@NgModule({
 declarations: [
   MyApp
 ],
 imports: [
  ...
 ]
 providers: [
   { provide: Http,
     useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, storageProvider: StorageProvider) => {
       { return new HttpProvider(backend, defaultOptions, storageProvider); },
     deps: [XHRBackend, RequestOptions, Storage] }
 ]

Probando:

Una vez que tengas todo listo puedes hacer una petición y si el Token esta disponible se enviará en la cabecera, siguiendo el estándar Bearer, ten en cuenta que el snippet busca un token en el LocalStorage y con el nombre token, sin embargo todo esto es customizable a tu gusto o necesidades.

 this.http.get(SOME_ENDPOINT)
 .map(res => res.json())
 .toPromise()

Si tienes algún problema implementado o una forma mas sencilla de hacer este trabajo no dudes en comentar, Saludos.

Anuncios

Un comentario sobre “Ionic3 Interceptor HTTP + Auth Token JWT

Agrega el tuyo

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 )

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 )

Google+ photo

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

Conectando a %s

Un sitio web WordPress.com.

Subir ↑

A %d blogueros les gusta esto: