Middleware (S'ha redirigit des de: Interceptor)

Contingut

1 Definició
- 1.1 Middleware HTTP
2 Laravel
3 Javascript
- 3.1 Vue.js
  - 3.1.1 Interceptors a vue-resource
  - 3.1.2 Navigation Guards a vue-router
4 Vegeu també
5 Enllaços externs

Definició

Middleware (aka lògica d'intercanvi entre aplicacions o interlogical) és un programari que assisteix la comunicació entre dos entitats de software.

Éste simplifica el trabajo de los programadores en la compleja tarea de generar las conexiones y sincronizaciones que son necesarias en los sistemas distribuidos. De esta forma, se provee una solución que mejora la calidad de servicio, así como la seguridad, el envío de mensajes, la actualización del directorio de servicio, etc.1

Funciona como una capa de abstracción de software distribuida, que se sitúa entre las capas de aplicaciones y las capas inferiores (sistema operativo y red). El middleware abstrae de la complejidad y heterogeneidad de las redes de comunicaciones subyacentes, así como de los sistemas operativos y lenguajes de programación, proporcionando una API para la fácil programación y manejo de aplicaciones distribuidas. Dependiendo del problema a resolver y de las funciones necesarias, serán útiles diferentes tipos de servicios de middleware. Por lo general el middleware del lado cliente está implementado por el Sistema Operativo, el cual posee las bibliotecas que ejecutan todas las funcionalidades para la comunicación a través de la red.

Middleware HTTP

Un Middleware HTTP és un codi que s'executa entre dos aplicacions molt concretes:

Client HTTP (navegador)
Server HTTP (servidor HTTP)

El codi middleware es pot executar de la banda del servidor o del client (si és per qüestió de seguretat com un middleware d'autenticació s'ha d'executar si o si al servidor).

HTTP middleware és per tant una forma elegant i SOLID (especialment compleix amb el SRP) de filtrar peticions HTTP en una web app.

Un exemple són els middleware de Laravel. Vegeu l'article Laravel Middleware

Laravel

Vegeu també Laravel#Controler_Middleware

Javascript

Vue.js

Interceptors a vue-resource

Existeix un concepte similar però l'anomenen interceptors:

https://github.com/vuejs/vue-resource/blob/master/docs/http.md#interceptors

Exemple:

Vue.http.interceptors.push((request, next) => {

  // modify request
  request.method = 'POST';

  // continue to next interceptor
  next();
});

Laravel a la seva plantilla per defecte (vegeu projecte laravel/laravel a Github) utilitza interceptors per afegir el CSRF Token:

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

El codi el podeu veure al fitxer https://github.com/laravel/laravel/blob/master/resources/assets/js/bootstrap.js

Més exemples:

Vue.http.interceptors.push((request, next)  => {

  // modify request
  request.method = 'POST';

  // continue to next interceptor
  next((response) => {

    // modify response
    response.body = '...';

  });
});

Return a Response and stop processing:

Vue.http.interceptors.push((request, next) => {

  // modify request ...

  // stop and return response
  next(request.respondWith(body, {
    status: 404,
    statusText: 'Not found'
  }));
});

Cal tenir en compte que no està disponible al core de vue.js sinó a l'eina de l'ecosistema vue anomenada vue-resource

Navigation Guards a vue-router

A l'eina vue-router també tenim un concepte similar als Midleware de Laravel aplicats a routes en aquest cas routes Javascript definides amb vue-router. HI ha tres tipus:

Global Guards

S'utilitza router.beforeEach:

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

Per-Route Guard

Es poden aplicar Guards només a rutes específiques amb beforeEnter:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

Funcionen igual que els Global Guards

In-Component Guards

Finalment es poden definir Guards específics per a components amb beforeRouteEnter i beforeRouteLeave:

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // called before the route that renders this component is confirmed.
    // does NOT have access to `this` component instance,
    // because it has not been created yet when this guard is called!
  },
  beforeRouteLeave (to, from, next) {
    // called when the route that renders this component is about to
    // be navigated away from.
    // has access to `this` component instance.
  }
}

Recursos: