Diretório Intermediário

O diretório middleware contém o intermediário da nossa aplicação. O intermediário permite-nos definir funções personalizadas que podem ser executadas antes de desenhar uma página ou grupo de páginas (disposição).

O intermediário partilhado deve ser colocado no diretório middleware/. O nome do ficheiro será o nome do intermediário (middleware/auth.js será o intermediário auth). Também podemos definir o intermediário específico da página ao utilizar diretamente uma função, consultar intermediário anónimo .

Um intermediário recebe o contexto como primeiro argumento.

export default function (context) {
  // Adicionar 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 (no primeiro pedido à aplicação de Nuxt, por exemplo, ao acessar diretamente à aplicação ou ao atualizar a página) e no lado do cliente ao navegar para outras rotas. Com ssr: false, os intermediários serão chamados no lado do cliente em ambas as situações.

O intermédio será executado em série, por esta ordem:

1. nuxt.config.js (pela ordem no ficheiro).
2. Disposições correspondentes.
3. Páginas correspondentes.

Intermediário da Rota

Um intermediário pode ser assíncrono. Para isto, retornamos uma Promise ou utilizar async e await:

import http from 'http'

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

Depois, no nosso nuxt.config.js, usamos a chave router.middleware:

export default {
  router: {
    middleware: 'stats'
  }
}

Agora, o intermediário stats será chamado para cada mudança da rota.

Também podemos adicionar o nosso intermediário (mesmo múltiplo) a uma disposição ou página específica.

export default {
  middleware: ['auth', 'stats']
}

Intermediário Nomeado

Podemos criar um intermediário nomeado ao criar um ficheiro no diretório middleware/, o nome do ficheiro será o nome do intermediário:

export default function ({ store, redirect }) {
  // Se o utilizador não estiver autenticado.
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

<template>
  <h1>Secret page</h1>
</template>

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

Intermediário Anónimo

Se precisarmos de utilizar um intermediário exclusivo para uma página específica, podemos utilizar diretamente uma função para a mesma (ou um vetor de funções):

<template>
  <h1>Secret page</h1>
</template>

<script>
  export default {
    middleware({ store, redirect }) {
      // Se o utilizador não estiver autenticado.
      if (!store.state.authenticated) {
        return redirect('/login')
      }
    }
  }
</script>