NodeJS + Express partie 3 : Les Middlewares
Tags: javascript, node, express, beginners
Published: 2021-10-28 11:37:24

---
title: NodeJS + Express partie 3 : Les Middlewares
description: 
published: true
tags: javascript, nodejs, express, beginner
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdsh8ga02c7jg2cw4sr7.png
series: expressJS
---

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](https://dev.to/ericlecodeur/creer-un-backend-en-javascript-introduction-a-node-js-3014)

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

<hr>
### 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

```jsx
user request -> midlleware -> response
```

### 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 :
```jsx
app.get('/about', (req, res) => {
    console.log(req.url)
    console.log(req.params)
    console.log(req.query)
    return res.send('About Page')
})
```

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

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

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

```jsx
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')
})
```

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()
```jsx
const logger  = (req, res, next) => {
    console.log(req.url)
    console.log(req.params)
    console.log(req.query)
    res.send('Custom About page')
}
```

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
```jsx
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')
})
```

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

```jsx
app.use('/api', logger)
```

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

```jsx
app.use([logger, auth])
```

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

```jsx
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')
    }
}
```

Dans le dernier exemple, nous ajoutons un objet utilisateur à la requête. Cet objet utilisateur peut maintenant être utilisé avec les routes.
```jsx
app.use(auth)

app.get('/about', (req, res) => {
    console.log(req.user)
    return res.send('About Page')
})
```
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).