Nuxt 3 já está disponível! Descobre mais sobre isso https://nuxt.com/v3

Translated page Contents of this page might be outdated.

O diretório middleware

O diretório middleware contém suas aplicações intermediárias. O intermediário permite você definir funções personalizadas que podem ser executadas antes da renderização, seja de uma página ou um grupo de páginas (esquema).


O intermediário partilhado deve ser colocado dentro do diretório middleware/. O nome do ficheiro será o nome do intermediário (middleware/auth.js será o intermediário auth). Você pode também definir intermediário específico da página ao usar uma função diretamente, vê intermediário anónimo .

Um intermediário recebe o contexto como o primeiro argumento.

middleware/user-agent.js
export default function (context) {
  // Adiciona a propriedade `userAgent` ao contexto
  context.userAgent = process.server
    ? context.req.headers['user-agent']
    : navigator.userAgent
}

No modo universal, os intermediários serão chamados uma vez no lado do servidor (na primeira requisição para a aplicação Nuxt, exemplo de quando estiverem diretamente acessando a aplicação ou atualizado a página) e no lado do cliente quando estiverem navegando para as rotas adiante. Com ssr: false, o intermediário será chamado no lado do cliente em ambas situações.

O intermédio será executado em série nesta ordem:

  1. nuxt.config.js (na ordem dentro do ficheiro)
  2. Esquemas correspondidos
  3. Páginas correspondidas

O intermediário do roteador

Um intermediário pode ser assíncrono. Para fazer isso retorne uma Promise ou usar async/await.

middleware/stats.js
import http from 'http'

export default function ({ route }) {
  return http.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}

Depois, dentro do seu nuxt.config.js, use a chave router.middleware.

nuxt.config.js
export default {
  router: {
    middleware: 'stats'
  }
}

Agora o intermediário stats será chamado para toda mudança de rota.

Você pode adicionar o seu intermediário (até mesmo vários) também para um esquema ou página específica.

pages/index.vue / layouts/default.vue
export default {
  middleware: ['auth', 'stats']
}

Intermediário nomeado

Você pode criar o intermediário nomeado ao criar um ficheiro dentro do diretório middleware/, o nome do ficheiro será o nome do intermediário.

middleware/authenticated.js
export default function ({ store, redirect }) {
  // Se o usuário não estiver autenticado
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}
pages/secret.vue
<template>
  <h1>Secret page</h1>
</template>

<script>
  export default {
    middleware: 'authenticated'
  }
</script>

Intermediário anónimo

Se você precisar usar um intermediário somente para uma página específica, você pode diretamente usar uma função para isso (ou um arranjo de funções):

pages/secret.vue
<template>
  <h1>Secret page</h1>
</template>

<script>
  export default {
    middleware({ store, redirect }) {
      // Se o usuário não estiver autenticado
      if (!store.state.authenticated) {
        return redirect('/login')
      }
    }
  }
</script>
Edit this page on GitHub Updated at Wed, Feb 1, 2023