Middlewares: O que são e como utilizar no Nuxt.JS

O que são Middlewares?

No Front-end, os Middlewares são blocos de códigos que são executados antes que a navegação para uma nova página aconteça, permitindo realizar diversos controles na nossa aplicação, como:

• Autenticação: verifica se o usuário está logado, caso contrário, é redirecionado para a tela de login.
• Permissão: verifica se o usuário tem as permissões de acessar aquela página, caso não tenha, ele é redirecionado para alguma página que tenha permissão.
• Logs: salvar informações sobre informações da página.

Os Middlewares funcionam como uma camada intermediária, atuando desde o início do carregamento da página até a sua renderização completa.

Essa funcionalidade de middlewares está presente em frameworks modernos do Front-end como Next.js e Nuxt.JS.

Neste artigo, vou te ensinar como implementar os Middlewares de rota no Nuxt.JS.

Middlewares de uma forma não tão técnica

"Pessoas em uma festa" por Cottonbro Studio , licenciado sob Pexels

Para explicar de forma mais simples, vou utilizar uma analogia:

Imagine que você quer entrar em uma festa, e nesse processo você vai passar por três funcionários da segurança da festa, que são os "middlewares", e cada um vai ser responsável por fazer uma ação específica.

1. O primeiro segurança vai verificar se você possui um ingresso e se é válido, semelhante a um middleware de autenticação, caso não possua o ingresso, você vai ser redirecionado para a bilheteria ou tela de login.
2. O segundo segurança vai conferir se você é maior de idade, requisito essencial para acessar a festa, semelhante a um middleware de permissão. Se você não tiver a permissão necessária para entrar, será redirecionado para fora da fila da festa.
3. O terceiro e último segurança vai te dar uma pulseira de identificação que sinaliza se você possui acesso à área vip da festa, semelhante aos middlewares que podem adicionar dados em requisições.

Por fim, após passar por todas as etapas anteriores, você estará livre para acessar o salão da festa.

Tipos de Middlewares

No Nuxt.js temos os seguintes tipos de Middlewares:

• Globais
• Inline ou Anônimos
• Nomeados

1. Os Middlewares globais são criados dentro da pasta /middleware e são executados em todas as páginas. É necessário adicionar o sufixo global.

/*
  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"
    });
  }
});

2. Os Middlewares inline ou anônimos são middlewares específicos para uma página, definidos diretamente dentro do arquivo da página no Nuxt; Isso limita a reutilização do código, visto que ele não pode ser facilmente compartilhado com outras páginas.

/*
  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>

3. Os Middlewares nomeados são criados dentro da pasta /middleware.

/*
  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");
  }
});

Nos Middlewares nomeados, é necessário definir quais páginas utilizam determinado middleware, uma das formas de se fazer isso é alterando os arquivos das páginas que vão utilizar aquele middleware:

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

Também importante dizer que mesmo que você nomeie os arquivos de middleware em padrões como PascalCase ou camelCase, os nomes dos arquivos são normalizados para o padrão kebab-case.

Conclusão

Espero que com esse artigo eu tenha conseguido te explicar de forma simples e rápida os principais pontos de criação e utilização de Middlewares no Nuxt.JS 🙋🏻‍♂️.

Se você precisar de mais informações sobre Middlewares no Nuxt.JS, você pode buscar na documentação oficial.