3

Estoy intentando montar un gestor de archivos WEB con soporte para rutas virtuales; es decir, no habrá un único directorio raiz, sino que se partirá de una colección. Cada una de estas colecciones se montará en un middleware diferente:

index.js

const express = require( 'express' );

const photos = new( require( './src/photos.js' ) )( '/Compartido/Imágenes' );
const music = new( require( './src/music.js' ) )( '/Compartido/Música' );

const app = express( );

app.use( '/fotos', photos.middleware ); // Colección de fotos.
app.use( '/musica', music.middleware ); // Colección de música.
...

app.listen( PORT, HOST );

Puesto que la cantidad de subdirectorios es, en principio, arbitraria, estoy intentando acceder a toda la URL relativa solicitada, para poder particionarla y trabajar con ella:

src/photos.js

class Photos {
    get middleware( ) { return this.$router; }

    get path( ) { return this.$path; }

    constructor( path ) {
        this.$path = path;
        this.$router = require( 'express' ).Router( );

        this.$router.get( '/index.html', ( req, res, next ) => this.$serveRoot( req, res, next ) );
        this.$router.get( '/', ( req, res, next ) => this.$serveRoot( req, res, next ) );

        // ESTA LÍNEA //
        this.$router.get( '/:url', ( req, res, next ) => this.$serveUrl( req, res, next ) );
    }
}

Esto no funciona. Si intento acceder con el navegador a

/photos/unaimagen.jpg

Mi manejador $serveUrl( ) no se llama.

Lo mismo ocurre para cualquier ruta que esté por debajo de la colección:

/photos/unaimagen.jpg
/photos/level1/unaimagen.jpg
/photos/level1/level2/unaimagen.jpg

Ninguna de estas peticiones llama a mi manejador.

He intentado establecer un manejador distinto por cada profundidad:

this.$router.get( '/*/*/:url', ( req, res, next ) => this.$serveUrl( req, res, next ) );
this.$router.get( '/*/:url', ( req, res, next ) => this.$serveUrl( req, res, next ) );
this.$router.get( '/:url', ( req, res, next ) => this.$serveUrl( req, res, next ) );

Pero el resultado es el mismo: mi manejador no se llama.

¿ Como puedo acceder a cualquier sub-ruta y obtenerla como un parámetro ?

1
  • ¿Has probado cambiar el orden de los midleware de tal forma que el que maneja el directorio raíz sea el último? el 16 sep. 2020 a las 20:35

1 respuesta 1

2

PROBLEMA

Se desea crear un conjunto de funciones middleware de Express para manejar un conjunto de rutas parametrizadas. Sin embargo, al implementar la solución se tiene el siguiente comportamiento:

/* ejemplo de rutas:
ruta raíz:
  /
rutas parametrizadas
  /:param
  /subruta/:param
  /:param1/:param2
  /:param1/subruta
  /:param1/subruta/:param2
  /:param1/subruta/:param2/subruta2
*/
this.$router.get( '/index.html', ( req, res, next ) => this.$serveRoot( req, res, next ) ); // <- funciona
this.$router.get( '/', ( req, res, next ) => this.$serveRoot( req, res, next ) ); // <- funciona

// ESTA LÍNEA //
this.$router.get( '/:url', ( req, res, next ) => this.$serveUrl( req, res, next ) ); // <- nunca entra aquí

SOLUCIÓN

El problema descrito ocurre por el orden de la declaración de las funciones middleware.

Express analiza la cadena correspondiente al parámetro de ruta y hace una comparación con la ruta solicitada en la petición. Esta comparación no es estricta, ya que una solicitud puede contener caracteres adicionales como parte de una URL Query String. Por lo tanto la verificación realizada debe garantizar que la ruta base (la ruta hasta la última aparición del carácter /) exista o haya sido declarada como tal en alguna de las fucniones middleware, devolviendo match en la primera que consiga.

Esto indica que si tengo un middleware para manejar una ruta raíz, declarado antes de otro middleware para manejar una subruta de la misma ruta raíz, Express usará el primer middleware, ya que el mismo hará match durante el análisis de la ruta.

Así, un middleware de la siguiente forma:

  this.$router.get( '/', (req, res, next) => { ... });

Se encargará de manejar todas las solicitudes a la ruta raíz, sin importar lo extenso o diferente de las subrutas.

Es decir, todas las siguientes solicitudes serán manejadas por el middleware anterior:

GET /
GET /subruta
GET /param1
GET /subruta/param1
GET /param1/?key=value
GET /long/path/of/differents/length/and/:params

Conociendo este comportamiento, debemos escoger muy bien el orden en que declaramos nuestros middleware en Express. Una de las reglas (no escritas) que siempre uso para estos casos es el uso de la llamada escalera invertida, que consiste en declarar en primer lugar las rutas más largas y de último las más cortas.

Por ejemplo:

this.$router.get('/:param1/subruta/:param2/subruta2', (req, res, next) => { ... });
this.$router.get('/:param1/subruta/:param2', (req, res, next) => { ... });
this.$router.get('/:param1/subruta', (req, res, next) => { ... });
this.$router.get('/:param1/:param2', (req, res, next) => { ... });
this.$router.get('/subruta/:param', (req, res, next) => { ... });
this.$router.get('/subruta', (req, res, next) => { ... });
this.$router.get('/:param', (req, res, next) => { ... });
this.$router.get('/', (req, res, next) => { ... });

De esta forma, garantizamos que el análisis de las rutas en cascada es efectivo al momento de decidir la función middleware apropiada para la ruta solicitada.

Espero que esto te ayude a resolver el problema.

1
  • Este mecanismo, enfoque de declaración de rutas funciona también aunque con diferencias obvias de sintaxis para zendframework Y adicionalmente, resuelve problemas similares. (+1) y te agradecería insinuar en la respuesta que podría ser útil para otros frameworks que emplean modelos MVC.
    – quevedo
    el 17 sep. 2020 a las 16:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.