中间件

[cssmagic]

概述

Nuxt 中间件与 Koa 中间件相比，在概念、功能、写法上都有一些明显差别，不能直接拿来类比或替换。

写法

一个中间件通常写为一个 JS 模块，导出一个 “中间件函数”。示例如下：

export default function (context) {
	if (context.isDev) {
		console.log('当前是开发阶段')
	}
}

中间件函数会接收到一个 context 参数，这个 context 对象在 Nuxt 项目的很多地方都是可访问的。中间件可以从 context 身上可以获取 store、route 等重要信息，也可以往它身上挂载一些新的数据，以便传递给其它中间件或组件。

中间件需要存放在 @/middleware 目录下，这样它才会被 Nuxt 识别。文件名会被视为中间件的名称，以便在其它地方引用。

声明

我们可以在以下三处声明并引用中间件：

1. 全局配置。在 nuxt.config.js 的 router.middleware 字段中指定中间件，字段类型为字符串或字符串数组，字段取值为一个或多个中间件名称。此处声明的中间件会作用到所有路由。

   export default {
   	router: {
   		middleware: ['foo', 'bar'],
   	},
   }
   

2. 布局组件配置。在组件实例的 middleware 字段中指定中间件，字段类型与取值同上。此处声明的中间件会作用到所有采用此布局的页面。

   <template>
   	<!-- 布局组件模板代码 -->
   </template>
   
   <script>
   export default {
   	middleware: 'baz',
   	// ...
   }
   </script>
   

3. 页面级组件配置。声明方法与上面的布局组件相似。此处声明的中间件会作用到当前页面。

在后两种声明方式中，middleware 字段也可以是一个中间件函数。对于不需要在多处使用的中间件来说，这种写法更紧凑，不需要把它独立成文件放进 @/middleware 目录里了。

运行

运行时机

在实时渲染模式下，中间件的运行场景有以下三种：

• 着陆页面：当用户首次访问 Nuxt 项目时，入口页面由 Nuxt 项目的服务端渲染，与此页面相关的中间件在服务端运行一次；其后，Nuxt 项目在浏览器端 “水合” 过程中，中间件并不会运行。
• 后续页面：当用户通过 <NuxtLink> 导航到一个新页面时，路由切换过程由 Nuxt 项目的客户端处理，因此，与新页面相关的中间件在客户端运行一次。
• 刷新页面：此情景类似于 “着陆页面”。

在预渲染模式下，所有中间件只会在客户端运行。

运行机制

根据上述三种声明方式，会有一系列中间件作用到当前页面。Nuxt 会按顺序执行这些中间件。中间件的执行顺序也就是上述三种声明方式的声明顺序（全局配置 > 布局组件配置 > 页面级组件配置）。

中间件可以是异步函数（async funtion 或一个返回 Promise 的函数），Nuxt 会等待异步操作完成，保证中间件串行执行。

如你所见，Nuxt 中间件不存在类似 Koa 的 “洋葱模型”。