Middlewares: What they are and how to use them in Nuxt.JS

What are Middlewares?

In the Front-end, Middlewares are blocks of code that are executed before navigation to a new page takes place, allowing us to perform various controls in our application, such as:

• Authentication: checks if the user is logged in, otherwise they are redirected to the login screen.
• Permission: checks if the user has permission to access that page, if not, he is redirected to a page that has permission.
• Logs: save information about page information.

Middleware works as an intermediate layer, acting from the beginning of the page loading until its complete rendering.

This middleware functionality is present in modern Front-end frameworks such as Next.js and Nuxt.JS.

In this article, I will teach you how to implement Route Middleware in Nuxt.JS.

Middleware in a not-so-technical way

To explain it more simply, I will use an analogy:

Imagine that you want to enter a party, and in this process you will go through three party security employees, who are the "middlewares", and each one will be responsible for carrying out a specific action.

1. The first security guard will check if you have a ticket and if it is valid, similar to an authentication middleware, if you don't have a ticket, you will be redirected to the ticket office or login screen.

2. The second security guard will check if you are of legal age, an essential requirement to access the party, similar to permission middleware. If you do not have the necessary permission to enter, you will be redirected out of the party line.

3. The third and final security guard will give you an identification bracelet that signals whether you have access to the VIP area of ​​the party, similar to middleware that can add data to requests.

Finally, after going through all the previous steps, you will be free to access the party room.

Types of Middleware

In Nuxt.js we have the following types of Middleware:

• Global
• Inline or Anonymous
• Nominees

1. Global Middlewares are created within the /middleware folder and run on all pages. You need to add the global suffix.

/*
  Exemplo de middleware Global:
  Esse middleware verifica se a URL/rota buscada existe.
  Caso não exista o usuário é redirecionado para página de links.

  Nome e Diretório do arquivo:
  /middleware/notFound.global.js
*/

export default defineNuxtRouteMiddleware((to) => {
  const hasFoundRoute = to.matched.length > 0;

  if (!hasFoundRoute) {
    return navigateTo({
      path: "/links"
    });
  }
});

1. Inline or anonymous middleware are middleware specific to a page, defined directly within the page file in Nuxt; This limits code reuse as it cannot be easily shared with other pages.

/*
  Exemplo de middleware inline:
  Esse middleware verifica se os dados estão presentes na store.
  Caso não esteja, os dados serão requisitados.
*/

<script setup lang="ts">
import { useStore } from 'vuex';

definePageMeta({
  middleware: [
    async function (to, from) {
      const store = useStore();
      if (!store.state.user) {
        await store.dispatch("fetchUser");
      }
    },
  ],
});
</script>

1. Named middlewares are created inside the /middleware folder.

/*
  Exemplo de middleware Nomeado:
  Esse middleware verifica o usuário está logado.
  Caso não esteja logado, ele é redirecionado para página de login.

  Nome e Diretório do arquivo:
  /middleware/auth.js
*/

export default defineNuxtRouteMiddleware((to, from) => {
  const { $store } = useNuxtApp();

  if (!$store.auth?.loggedIn) {
    return navigateTo("/login");
  }
});

In named Middleware, it is necessary to define which pages use a certain middleware, one of the ways to do this is by changing the files of the pages that will use that middleware:

<script setup>
definePageMeta({
  middleware: "auth-admin"
});
</script>

Also important to say that even if you name the middleware files in patterns like PascalCase or camelCase, the filenames are normalized to the kebab-case pattern.

Conclusion

I hope that with this article I was able to explain to you in a simple and quick way the main points of creating and using Middleware in Nuxt.JS ??‍♂️.

If you need more information about Middleware in Nuxt.JS, you can search the official documentation.

The above is the detailed content of Middlewares: What they are and how to use them in Nuxt.JS. For more information, please follow other related articles on the PHP Chinese website!