DEV Community

Cover image for NodeJS + Express partie 3 : Les Middlewares
 Eric Le Codeur
Eric Le Codeur

Posted on

NodeJS + Express partie 3 : Les Middlewares

Voici une série d'articles qui vous permettra créer des applications backend avec NodeJS + Express.

Cette série est la suite de ma série sur les bases de NodeJS. Si vous n'avez pas les connaissances de bases en NodeJS lisez cette série d'abord : Introduction à NodeJS

Node.js est aujourd'hui un incontournable, il est donc essentiel pour un développeur de le maitriser.

Je vais donc publier un nouvel article environ au deux jours et petit à petit vous apprendrez tout ce qu'il y a à savoir sur Node.js + Espress

Pour ne rien manquer suivez moi sur twitter : https://twitter.com/EricLeCodeur


Les Middlewares

Les middlewares sont des fonctions qui s'exécutent lors de la requête au serveur. Ces fonctions ont accès aux paramètres de la requête et de la réponse et peuvent donc effectuer beaucoup de choses pour améliorer/automatiser les fonctionnalités de l'API

Le middleware se situe entre la requête et la réponse

user request -> midlleware -> response
Enter fullscreen mode Exit fullscreen mode

Créez votre premier Middleware

Supposons que nous voulions une fonction pour enregistrer l'adresse URL de la requête chaque fois qu'une page est visitée.

Sans middleware, nous aurions pu le faire avec un code comme celui-ci :

app.get('/about', (req, res) => {
    console.log(req.url)
    console.log(req.params)
    console.log(req.query)
    return res.send('About Page')
})
Enter fullscreen mode Exit fullscreen mode

Cela fonctionnera très bien, mais que se passe-t-il si nous avons 100 chemin différents ? Nous ne pouvons pas copier/coller ces lignes console.log() sur toutes les routes.

Une solution consiste à mettre ces log dans une fonction middleware

const logger  = (req, res, next) => {
    console.log(req.url)
    console.log(req.params)
    console.log(req.query)
    next()
}
Enter fullscreen mode Exit fullscreen mode

C'est une fonction assez simple. Vous connaissez déjà les paramètres req et res. La nouveauté ici est la fonction next(). La fonction next() est une fonction prédéfinie Espress qui redonne le contrôle aux routes appelantes. Après l'exécution de console.log(), la requête doit continuer sa route vers la route d'appel.

Voici un exemple complet d'un middleware

const logger  = (req, res, next) => {
    console.log(req.url)
    console.log(req.params)
    console.log(req.query)
    next()
}

app.use(logger) // execute your middleware for all requests

app.get('/about', (req, res) => {
    return res.send('About Page')
})
Enter fullscreen mode Exit fullscreen mode

Lorsque l'utilisateur visite "/about" Express exécute le app.get(). Mais juste avant, il exécutera le middleware spécifié dans app.use(). Une fois le middleware exécuté, next() continuera l'exécution de app.get()

Voici la séquence d'exécution :

requête client → /about ⇒ logger() → app.get() → réponse client

Lors de la création d'un middleware, vous n'êtes pas obligé d'utiliser le next(). Vous pouvez envoyer votre propre réponse et remplacer/omettre complètement app.get()

const logger  = (req, res, next) => {
    console.log(req.url)
    console.log(req.params)
    console.log(req.query)
    res.send('Custom About page')
}
Enter fullscreen mode Exit fullscreen mode

Voici la séquence d'exécution :

requête client → /about ⇒ logger() → réponse client

Si le middleware ne s'applique qu'à une ou deux routes, vous pouvez utiliser cette syntaxe pour exécuter le middleware uniquement pour ces routes

const logger  = (req, res, next) => {
    console.log(req.url)
    console.log(req.params)
    console.log(req.query)
    next()
}

app.get('/about', logger, (req, res) => {
    return res.send('About Page')
})
Enter fullscreen mode Exit fullscreen mode

Nous avons noté que nous n'avons pas utilisé l'app.use() mais seulement spécifié une fonction middleware en tant que paramètre de l'app.get()

Vous pouvez également exécuter votre middleware uniquement pour les requêtes qui se trouvent sous un chemin spécifique ex : /api

app.use('/api', logger)
Enter fullscreen mode Exit fullscreen mode

Plusieurs middleware peuvent être utilisés en même temps

app.use([logger, auth])
Enter fullscreen mode Exit fullscreen mode

Notez que le middleware sera exécuté dans le même ordre que declare.

Le middleware peut modifier l'objet req et l'objet res

const auth  = (req, res, next) => {
    const user = req.query.user
    if (user === 'admin') {
        req.user = ( name: 'admin', id: 1 }
        next()
    } else {
        res.status(401).send('Unauthorized')
    }
}
Enter fullscreen mode Exit fullscreen mode

Dans le dernier exemple, nous ajoutons un objet utilisateur à la requête. Cet objet utilisateur peut maintenant être utilisé avec les routes.

app.use(auth)

app.get('/about', (req, res) => {
    console.log(req.user)
    return res.send('About Page')
})
Enter fullscreen mode Exit fullscreen mode

Cet exemple a été ultra simplifié mais il montre la vraie puissance d'un middleware

Conclusion

C'est tout pour aujourd'hui, suivez moi sur twitter : https://twitter.com/EricLeCodeur afin d'être avisé de la parution du prochain article (d'ici deux jours).

Top comments (1)

Collapse
 
bam92 profile image
Abel Lifaefi Mbula

Salut Eric,

C'est genial ton article. Ca me rafrechit la memoire sur la notion de middleware.

Il y a juste une petite erreur a la permiere ligne : ajoute "de" apres "permettra"