Home Web Front-end JS Tutorial Understanding Middleware in Express.js with Node.js - Part 9

Understanding Middleware in Express.js with Node.js - Part 9

Sep 21, 2024 am 06:29 AM

Understanding Middleware in Express.js with Node.js - Part 9

Understanding Middleware in Express.js: The Easy Way

Middleware in Express.js might sound a bit technical, but once you get the hang of it, it's pretty straightforward. It's like a pit stop in a race—requests come in, and before they reach the finish line (your route handler), they make some stops at different points to get modified, checked, or just logged.

In this article, we’ll break down what middleware is, how to use it, and show you some real-life examples. Let’s make this as simple and practical as possible!


So, What Exactly Is Middleware?

Imagine every request to your server is a car on a road trip. Middleware is like a series of checkpoints that each car has to pass through before it reaches its destination. At each checkpoint (middleware), something happens: maybe the car gets a wash, maybe it picks up some snacks, or maybe it's told to turn around and go home!

In coding terms, middleware is just a function that sits between the request and response. It can:

  • Run some code.
  • Change the request or response.
  • Stop the request from going any further.
  • Pass it on to the next middleware.

Here's a super basic example:

app.use((req, res, next) => {
  console.log('A request came in!');
  next(); // Pass the baton to the next middleware
});
Copy after login

Every time a request hits your server, it logs a message, then passes control to the next piece of middleware or route handler.


Built-in Middleware: Express’s Ready-to-Go Tools

Express comes with a few built-in middleware functions that make life easier. Here are a couple you’ll probably use all the time:

1- express.json(): This one helps you deal with incoming JSON data.

app.use(express.json());
Copy after login

2- express.static(): Want to serve static files like images or CSS? This middleware's got you covered.

app.use(express.static('public'));
Copy after login

3- express.urlencoded(): It helps to parse data sent through HTML forms.

app.use(express.urlencoded({ extended: true }));
Copy after login

Custom Middleware: Build Your Own

You can also create your own middleware to handle specific tasks like logging or checking if a user is logged in.

Example: Simple Logger

app.use((req, res, next) => {
  console.log(`Request Method: ${req.method}, URL: ${req.url}`);
  next();
});
Copy after login

This logs the HTTP method and URL every time a request hits your server. It’s great for tracking what’s happening with your app.

Example: Authentication Check

const checkAuth = (req, res, next) => {
  if (!req.headers.authorization) {
    return res.status(403).send('You shall not pass! (Unauthorized)');
  }
  next(); // Allow the request to continue if authorized
};

app.use(checkAuth);
Copy after login

Here, if a request doesn’t have an authorization header, it gets blocked with a “403 Forbidden” message. Otherwise, it gets passed along.


Using Third-Party Middleware

Don't feel like writing everything yourself? Good news: Express works with tons of third-party middleware that can handle tasks for you.

Example: morgan for Logging

morgan is a popular middleware for logging requests. To use it:

1- Install it:

npm install morgan
Copy after login

2- Add it to your app:

const morgan = require('morgan');
app.use(morgan('dev'));
Copy after login

Now, every time a request comes in, you’ll get a nice, formatted log in your terminal.

Example: cors for Cross-Origin Requests

cors middleware allows your app to handle requests from other domains (super useful when building APIs).

1- Install it:

npm install cors
Copy after login

2- Use it:

const cors = require('cors');
app.use(cors());
Copy after login

That’s it! Now your app can handle cross-origin requests without breaking a sweat.


Middleware for Specific Routes

You don’t always have to apply middleware to every route in your app. Sometimes, you only want it to run on specific ones.

app.get('/dashboard', checkAuth, (req, res) => {
  res.send('Welcome to the Dashboard');
});
Copy after login

Here, the checkAuth middleware only runs when someone tries to access the /dashboard route. If they’re not authorized, they don’t get in!


Handling Errors with Middleware

Sometimes things go wrong. That’s where error-handling middleware comes in handy. It looks a little different—it takes four arguments: err, req, res, and next.

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Something went wrong!');
});
Copy after login

This middleware catches errors and sends back a friendly "500 Internal Server Error" message.


Wrapping Up

Middleware is like the Swiss Army knife of Express.js. It helps you manage requests, handle errors, and add cool features like logging or authentication. Whether you’re using the built-in options, writing your own, or pulling in third-party tools, middleware keeps your app modular and manageable.

Thank you for reading, and happy coding! ?

The above is the detailed content of Understanding Middleware in Express.js with Node.js - Part 9. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What should I do if I encounter garbled code printing for front-end thermal paper receipts? What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Demystifying JavaScript: What It Does and Why It Matters Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Who gets paid more Python or JavaScript? Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

How to merge array elements with the same ID into one object using JavaScript? How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Is JavaScript hard to learn? Is JavaScript hard to learn? Apr 03, 2025 am 12:20 AM

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The Evolution of JavaScript: Current Trends and Future Prospects The Evolution of JavaScript: Current Trends and Future Prospects Apr 10, 2025 am 09:33 AM

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

The difference in console.log output result: Why are the two calls different? The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

See all articles