Skip to content

11. Exemplo [nuxt-08]: middlewares de roteamento

Neste exemplo, apresentamos o conceito de middlewares de roteamento, scripts executados a cada mudança de rota.

O exemplo [nuxt-08] é obtido inicialmente por meio da cópia do projeto [nuxt-01]:

Image

Os middlewares de roteamento devem estar em uma pasta chamada [middleware] [2]. Pode haver um roteamento em dois níveis:

  • um roteamento aplicado a cada navegação. Esse roteamento é, então, declarado no arquivo [nuxt.config.js];
  • um roteamento aplicado a uma página específica, quando esta é o destino do roteamento. Esse roteamento é, então, declarado nessa página de destino;

11.1. Roteamento geral

O arquivo [middleware / routing.js] garantirá o roteamento geral. Ele é objeto da seguinte declaração no arquivo [nuxt.config.js]:


  router: {
    base: '/nuxt-08/',
    middleware: ['routing']
},

Os middlewares de roteamento geral são uma propriedade do roteador (linha 1). Pode haver vários middlewares de roteamento. É por isso que, na linha 3, o valor da propriedade [middleware] é uma matriz. Percebe-se que não se utiliza um caminho para designar o middleware. Ele será procurado automaticamente na pasta [middleware] do projeto;

O middleware [routing], neste caso, apenas gera logs:


/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function(...args) {
  // quem executa esse código?
  console.log('[routing], process.server=', process.server, 'process.client=', process.client)
  const who = process.server ? 'server' : 'client'
  const routing = '[routing ' + who + ']'
  // número de argumentos
  console.log(routing + ', il y a', args.length, 'argument(s)')

  // primeiro argumento
  const context = args[0]
  // chaves de contexto
  dumpkeys(routing + ', context', context)
  // o aplicativo
  dumpkeys(routing + ', context.app', context.app)
  // a rota
  dumpkeys(routing + ', context.route', context.route)
  console.log(routing + ', context.route=', context.route)
  // o roteador
  dumpkeys(routing + ', context.app.router', context.app.router)
  // o router.options.routes
  dumpkeys(routing + ', context.app.router.options.routes', context.app.router.options.routes)
  console.log(routing + ', context.app.router.options.routes=', context.app.router.options.routes)
}

function dumpkeys(message, object) {
  // lista de chaves de [object]
  const ligne = 'Liste des clés [' + message + ']'
  console.log(ligne)
  // lista de chaves
  if (object) {
    console.log(Object.keys(object))
  }
}
  • linha 3: vamos descobrir que o middleware recebe um argumento: o contexto do executor (servidor ou cliente);
  • linhas 4-25: exibimos as propriedades de diferentes objetos para saber o que é utilizável. Veremos que o contexto do middleware é praticamente idêntico ao contexto do plugin;

11.2. Roteamento para uma página específica

Queremos controlar a forma como se chega à página [index]. Para isso, precisamos inserir a propriedade [middleware] nesta página [index]:


<script>
/* eslint-disable no-undef */
/* eslint-disable no-console */
/* eslint-disable nuxt/no-env-in-hooks */

import Navigation from '@/components/navigation'
import Layout from '@/components/layout'

export default {
  name: 'Home',
  // componentes utilizados
  components: {
    Layout,
    Navigation
  },
  // ciclo de vida
  beforeCreate() {
    // cliente e servidor
    console.log('[home beforeCreate]')
  },
  created() {
    // cliente e servidor
    console.log('[home created]')
  },
  beforeMount() {
    // somente cliente
    console.log('[home beforeMount]')
  },
  mounted() {
    // somente cliente
    console.log('[home mounted]')
  },
  // roteamento
  middleware: ['index-routing']
}
</script>
  • linha 34: a propriedade [middleware] lista os scripts a serem executados sempre que a próxima página exibida for a página [index]. Novamente, esses scripts serão procurados na pasta [middleware] do projeto;

O middleware [index-routing] é o seguinte:


/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function(...args) {
  // quem executa esse código?
  console.log('[index-routing], process.server=', process.server, 'process.client=', process.client)
  const who = process.server ? 'server' : 'client'
  const indexRouting = '[index-routing ' + who + ']'
  // número de argumentos
  console.log(indexRouting + ', il y a', args.length, 'argument(s)')

  // primeiro argumento
  const context = args[0]
  // chaves do contexto
  dumpkeys(indexRouting + ', context', context)
  // o aplicativo
  dumpkeys(indexRouting + ', context.app', context.app)
  // a rota
  dumpkeys(indexRouting + ', context.route', context.route)
  console.log(indexRouting + ', context.route=', context.route)
  // o roteador
  dumpkeys(indexRouting + ', context.app.router', context.app.router)
  // o router.options.routes
  dumpkeys(indexRouting + ', context.app.router.options.routes', context.app.router.options.routes)
  console.log(indexRouting + ', context.app.router.options.routes=', context.app.router.options.routes)
  // de onde viemos?
  if (context.from) {
    console.log('from=', context.from)
  }
}

function dumpkeys(message, object) {
  // lista de chaves de [object]
  const ligne = 'Liste des clés [' + message + ']'
  console.log(ligne)
  // lista de chaves
  if (object) {
    console.log(Object.keys(object))
  }
}

O código de [index-routing] é idêntico ao de [routing] e produz os mesmos resultados. O que nos interessa é verificar quando esses dois middlewares são executados.

11.3. Execução do projeto

Executamos o projeto. Os logs são, então, os seguintes:

É o script [routing] que é executado primeiro pelo servidor:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
[routing], process.server= true process.client= false
[routing server], il y a 1 argument(s)
Liste des clés [[routing server], context]
[ 'isStatic',
  'isDev',
  'isHMR',
  'app',
  'payload',
  'error',
  'base',
  'env',
  'req',
  'res',
  'ssrContext',
  'redirect',
  'beforeNuxtRender',
  'route',
  'next',
  '_redirected',
  '_errored',
  'params',
  'query',
   '$axios' ]
Liste des clés [[routing server], context.app]
[ 'router',
  'nuxt',
  'head',
  'render',
  'data',
  'beforeCreate',
  'created',
  'mounted',
  'watch',
  'computed',
  'methods',
  'components',
  'context',
   '$axios' ]
Liste des clés [[routing server], context.route]
[ 'name',
  'meta',
  'path',
  'hash',
  'query',
  'params',
  'fullPath',
  'matched' ]
[routing server], context.route= { name: 'index',
  meta: [ {} ],
  path: '/',
  hash: '',
  query: {},
  params: {},
  fullPath: '/',
  matched:
   [ { path: '',
       regex: /^(?:\/(?=$))?$/i,
       components: [Object],
       instances: {},
       name: 'index',
       parent: undefined,
       matchAs: undefined,
       redirect: undefined,
       beforeEnter: undefined,
       meta: {},
       props: {} } ] }
Liste des clés [[routing server], context.app.router]
[ 'app',
  'apps',
  'options',
  'beforeHooks',
  'resolveHooks',
  'afterHooks',
  'matcher',
  'fallback',
  'mode',
  'history' ]
Liste des clés [[routing server], context.app.router.options.routes]
[ '0', '1', '2' ]
[routing server], context.app.router.options.routes= [ { path: '/page1',
    component: [Function: _61cefe10],
    name: 'page1' },
  { path: '/page2',
    component: [Function: _61dd1591],
    name: 'page2' },
  { path: '/', component: [Function: _00d5e140], name: 'index' } ]

Vemos aqui o que havíamos obtido com os plug-ins.

  • linha 15: a propriedade [redirect] é frequentemente utilizada em middlewares: ela permite alterar o destino do roteamento em andamento;

Em seguida, como a página que será exibida é a [index], o servidor executa o script [index-routing] e exibe os seguintes logs:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
[index-routing], process.server= true process.client= false
[index-routing server], il y a 1 argument(s)
Liste des clés [[index-routing server], context]
[ 'isStatic',
  'isDev',
  'isHMR',
  'app',
  'payload',
  'error',
  'base',
  'env',
  'req',
  'res',
  'ssrContext',
  'redirect',
  'beforeNuxtRender',
  'route',
  'next',
  '_redirected',
  '_errored',
  'params',
  'query',
   '$axios' ]
Liste des clés [[index-routing server], context.app]
[ 'router',
  'nuxt',
  'head',
  'render',
  'data',
  'beforeCreate',
  'created',
  'mounted',
  'watch',
  'computed',
  'methods',
  'components',
  'context',
   '$axios' ]
Liste des clés [[index-routing server], context.route]
[ 'name',
  'meta',
  'path',
  'hash',
  'query',
  'params',
  'fullPath',
  'matched' ]
[index-routing server], context.route= { name: 'index',
  meta: [ {} ],
  path: '/',
  hash: '',
  query: {},
  params: {},
  fullPath: '/',
  matched:
   [ { path: '',
       regex: /^(?:\/(?=$))?$/i,
       components: [Object],
       instances: {},
       name: 'index',
       parent: undefined,
       matchAs: undefined,
       redirect: undefined,
       beforeEnter: undefined,
       meta: {},
       props: {} } ] }
Liste des clés [[index-routing server], context.app.router]
[ 'app',
  'apps',
  'options',
  'beforeHooks',
  'resolveHooks',
  'afterHooks',
  'matcher',
  'fallback',
  'mode',
  'history' ]
Liste des clés [[index-routing server], context.app.router.options.routes]
[ '0', '1', '2' ]
[index-routing server], context.app.router.options.routes= [ { path: '/page1',
    component: [Function: _61cefe10],
    name: 'page1' },
  { path: '/page2',
    component: [Function: _61dd1591],
    name: 'page2' },
  { path: '/', component: [Function: _00d5e140], name: 'index' } ]

Os resultados obtidos com o script [index-routing] são semelhantes aos obtidos com o script [routing].

Assim que a página [index] é recebida pelo navegador do cliente, os scripts do cliente assumem o controle. Os logs passam a ser os seguintes:

1
2
3
4
[home beforeCreate]
[home created]
[home beforeMount]
[home mounted]

Vemos, portanto, que, ao iniciar o aplicativo, o cliente não executa nenhum middleware. Isso significa que isso ocorrerá sempre que o usuário forçar uma chamada ao servidor. Os middlewares só são executados pelo cliente durante a navegação dentro do próprio cliente. Vamos, por exemplo, acessar a página [page1] (estamos na página [index]) usando o link [Page 1]. Os logs ficam assim:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
[routing], process.server= false process.client= true
[routing client], il y a 1 argument(s)
Liste des clés [[routing client], context]
(18) ["isStatic", "isDev", "isHMR", "app", "payload", "error", "base", "env", "redirect", "nuxtState", "route", "next", "_redirected", "_errored", "params", "query", "$axios", "from"]
Liste des clés [[routing client], context.app]
(14) ["router", "nuxt", "head", "render", "data", "beforeCreate", "created", "mounted", "watch", "computed", "methods", "components", "context", "$axios"]
Liste des clés [[routing client], context.route]
(8) ["name", "meta", "path", "hash", "query", "params", "fullPath", "matched"]
[routing client], context.route= {name: "page1", meta: Array(1), path: "/page1", hash: "", query: {…}, …}
Liste des clés [[routing client], context.app.router]
(10) ["app", "apps", "options", "beforeHooks", "resolveHooks", "afterHooks", "matcher", "fallback", "mode", "history"]
Liste des clés [[routing client], context.app.router.options.routes]
(3) ["0", "1", "2"]
[routing client], context.app.router.options.routes= (3) [{…}, {…}, {…}]0: {path: "/page1", name: "page1", component: ƒ}1: {path: "/page2", name: "page2", component: ƒ}2: {path: "/", name: "index", component: ƒ}length: 3__proto__: Array(0)
[page1 beforeCreate]
[page1 created]
[page1 beforeMount]
[page1 mounted]
  • linha 2: o middleware [routing] é executado pelo cliente;
  • linha 4: observe a propriedade [from]: essa é a rota de onde viemos;
  • linha 9: [context.route] é a rota para a qual estamos indo;
  • linhas 15-18: exibição da página [page1];

Agora, voltemos à página [index] pelo link [Home]. Os registros são, então, os seguintes:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
[routing], process.server= false process.client= true
[routing client], il y a 1 argument(s)
Liste des clés [[routing client], context]
(18) ["isStatic", "isDev", "isHMR", "app", "payload", "error", "base", "env", "redirect", "nuxtState", "route", "next", "_redirected", "_errored", "params", "query", "$axios", "from"]
Liste des clés [[routing client], context.app]
(14) ["router", "nuxt", "head", "render", "data", "beforeCreate", "created", "mounted", "watch", "computed", "methods", "components", "context", "$axios"]
Liste des clés [[routing client], context.route]
(8) ["name", "meta", "path", "hash", "query", "params", "fullPath", "matched"]
[routing client], context.route= {name: "index", meta: Array(1), path: "/", hash: "", query: {…}, …}
Liste des clés [[routing client], context.app.router]
(10) ["app", "apps", "options", "beforeHooks", "resolveHooks", "afterHooks", "matcher", "fallback", "mode", "history"]
Liste des clés [[routing client], context.app.router.options.routes]
(3) ["0", "1", "2"]
[routing client], context.app.router.options.routes= (3) [{…}, {…}, {…}]0: {path: "/page1", name: "page1", component: ƒ}1: {path: "/page2", name: "page2", component: ƒ}2: {path: "/", name: "index", component: ƒ}length: 3__proto__: Array(0)
[index-routing], process.server= false process.client= true
[index-routing client], il y a 1 argument(s)
Liste des clés [[index-routing client], context]
(18) ["isStatic", "isDev", "isHMR", "app", "payload", "error", "base", "env", "redirect", "nuxtState", "route", "next", "_redirected", "_errored", "params", "query", "$axios", "from"]
Liste des clés [[index-routing client], context.app]
(14) ["router", "nuxt", "head", "render", "data", "beforeCreate", "created", "mounted", "watch", "computed", "methods", "components", "context", "$axios"]
Liste des clés [[index-routing client], context.route]
(8) ["name", "meta", "path", "hash", "query", "params", "fullPath", "matched"]
[index-routing client], context.route= {name: "index", meta: Array(1), path: "/", hash: "", query: {…}, …}
Liste des clés [[index-routing client], context.app.router]
(10) ["app", "apps", "options", "beforeHooks", "resolveHooks", "afterHooks", "matcher", "fallback", "mode", "history"]
Liste des clés [[index-routing client], context.app.router.options.routes]
(3) ["0", "1", "2"]
[index-routing client], context.app.router.options.routes= (3) [{…}, {…}, {…}]0: {path: "/page1", name: "page1", component: ƒ}1: {path: "/page2", name: "page2", component: ƒ}2: {path: "/", name: "index", component: ƒ}length: 3__proto__: Array(0)
from= {name: "page1", meta: Array(1), path: "/page1", hash: "", query: {…}, …}
[home beforeCreate]
[home created]
[home beforeMount]
[home mounted]
  • linhas 1-15: o cliente executa o middleware [routing]. Isso é normal. Ele é executado a cada mudança de rota;
  • linhas 16-29: o cliente executa o middleware [index-routing], pois:
    • [index] é o destino da rota atual (ver linha 23);
    • a página [index] definiu um middleware, chamado [index-routing];

Vemos, portanto, que os middlewares de roteamento geral são executados pelo cliente antes dos middlewares associados às páginas.

https://stahe.github.io
Este tutorial, escrito por Serge Tahé, é disponibilizado ao público de acordo com os termos da Licença Creative Commons Atribuição – Sem uso comercial – Compartilhamento igual 3.0 inalterado.