nuxt3中间件(middleware)详解

在项目中有时候需要在网站切换路由的过程中添加一些自定义的逻辑，比如权限什么的。这个时候可以使用nuxt的middleware。

nuxt3提供了一个可定制化的路由中间件框架。这个中间件运行在nuxt3(nuxt3是基于vue3的)应用的vue部分，在你跳转到指定路由之前，可以执行你自己添加的代码。

nuxt3中有三种路由中间件

1. 匿名(或者叫内联)的中间件：在pages目录下的以文件名自动生成对应路由的功能，就是nuxt3框架内部自动生成一些中间件来实现这一机制的。
2. 命名的路由中间件：放在项目的middleware目录下。 此目录下的命名路由如果在page中使用，那nuxt3框架会自动加载此路由中间件。(注意，路由中间件名称会被统一成kebab-case格式，例如: someMiddleware 会变成 some-middleware)
3. 全局的路由中间件: 放在项目根目录中的middleware目录下，并以.global为后缀。这种中间件会在每个路由切换的时候被执行。

上面的前两个路由中间件可以定义在 definePageMeta中

例如:

-| middleware/
---| auth.ts

<!-- 在页面文件中的代码 -->
<script setup>
definePageMeta({
  middleware: ["auth"]
  // or middleware: 'auth'
})
</script>

中间件定义格式

路由中间件以当前路由和下一个路由为参数,如下

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.params.id === '1') {
    return abortNavigation()
  }
  return navigateTo('/')
})

nuxt3提供两个可直接从中间件返回的方法

1. navigateTo

   navigateTo (to: RouteLocationRaw | undefined | null, options?: { replace: boolean, redirectCode: number, external: boolean )
   

   此方法可以在中间件或插件中重定向到指定的路由。 也可以直接调用来完成页面的跳转。

2. abortNavigation

   abortNavigation (err?: string | Error)
   

   这个就是直接终止跳转，并可以返回一些错误信息。

中间件可能的返回值说明：

1. 无返回值：也就是说当前中间件不会阻塞路由跳转。
2. return navigateTo('/')or return navigateTo({ path: '/' })， 重定向到指定的路径，如何是在服务端的话，会设置 redirect code 为302
3. return navigateTo('/', { redirectCode: 301 }), 重定向到指定的路径，如果直服务端的话，会设置 redirect code 为301 表示这个重定向的永久的。
4. return abortNavigation()终止当前的跳转
5. return abortNavigation(error)终止跳转并带有错误信息

动态添加中间件

通过addRouteMiddleware()方法可以在代码中动态添加全局和命名路由中间件。例如在插件中

export default defineNuxtPlugin(() => {
  addRouteMiddleware('global-test', () => {
    console.log('this global middleware was added in a plugin and will be run on every route change')
  }, { global: true })

  addRouteMiddleware('named-test', () => {
    console.log('this named middleware was added in a plugin and would override any existing middleware of the same name')
  })
})

版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：nuxt3中间件(middleware)详解