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.

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.

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.

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.

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.

export default function ({ store, redirect }) {
  // Se o usuário 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 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):

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