nuxt3 全局性中间拦截注入的几种方式

在 Nuxt 3 中，可以使用 全局钩子函数、中间件 和 插件 来实现一些全局性的逻辑或功能扩展。它们的使用场景和功能有所不同，下面将详细介绍这几种方式，并给出具体的使用示例。

1. 全局钩子函数

全局钩子函数是 Nuxt 3 提供的生命周期钩子，用于在不同阶段执行一些全局操作，例如应用创建、页面渲染、路由跳转等。

常见的全局钩子函数

1. app:created: 在 Nuxt 应用创建时触发
2. page:finish: 页面渲染完成时触发
3. render:route: 渲染一个路由时触发
4. route:before: 路由跳转之前触发
5. error:handle: 全局错误处理
6. build:before: 构建开始之前触发

全局钩子函数使用示例

通过 defineNuxtPlugin 在插件中注册全局钩子函数。

// plugins/global-hooks.js
export default defineNuxtPlugin(nuxtApp => {
  // 在 Nuxt 应用创建时触发
  nuxtApp.hook('app:created', () => {
    console.log('Nuxt app has been created')
  })

  // 在页面渲染完成时触发
  nuxtApp.hook('page:finish', () => {
    console.log('Page has finished rendering')
  })

  // 在路由跳转之前触发
  nuxtApp.hook('route:before', (to, from) => {
    console.log('Navigating to:', to.fullPath)
  })
})

在 nuxt.config.ts 中注册该插件：

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: ['~/plugins/global-hooks.js']
})

2. 中间件 (Middleware)

中间件用于在路由进入前进行一些操作（如权限检查、数据预取等）。在 Nuxt 3 中，中间件可以分为两种类型：

• 页面中间件：仅在特定页面或路由中使用。
• 全局中间件：对所有页面或路由有效。

中间件使用示例

1. 创建全局中间件

全局中间件在每个页面请求之前都会执行，可以用来进行权限验证、数据预取等操作。

// middleware/global.js
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useState('user') // 假设用户信息存在state中
  if (!user.value) {
    return navigateTo('/login') // 如果没有登录，重定向到登录页
  }
})

然后在 nuxt.config.ts 中配置全局中间件：

// nuxt.config.ts
export default defineNuxtConfig({
  router: {
    middleware: ['global'] // 注册全局中间件
  }
})

2. 创建页面级中间件

如果只想在某些页面中使用中间件，可以将其放在页面级的 middleware 中：

// pages/protected.vue
<script setup>
definePageMeta({
  middleware: 'global' // 仅在这个页面应用中间件
})
</script>

3. 插件 (Plugins)

插件用于扩展 Nuxt 3 的功能，可以用于注入全局变量、提供 API 或第三方库的实例等。插件在应用启动时就会加载，并且可以在整个应用中共享。

插件使用示例

1. 创建插件

插件可以在 plugins/ 目录下创建，并通过 defineNuxtPlugin 定义。

// plugins/global-plugin.js
export default defineNuxtPlugin(nuxtApp => {
  // 注入一个全局变量
  nuxtApp.provide('globalVar', 'This is a global variable')

  // 注入一个方法
  nuxtApp.provide('globalMethod', () => {
    console.log('This is a global method')
  })
})

2. 在 nuxt.config.ts 中注册插件

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: ['~/plugins/global-plugin.js']
})

3. 在组件中使用插件提供的全局变量和方法

通过 useNuxtApp 获取插件中提供的变量和方法：

<template>
  <div>
    <p>{{ globalVar }}</p>
    <button @click="globalMethod">Call Global Method</button>
  </div>
</template>

<script setup>
const { globalVar, globalMethod } = useNuxtApp()
</script>

使用第三方库的插件

你也可以在插件中引入并使用第三方库，例如使用 axios 来进行全局请求：

// plugins/axios.js
import axios from 'axios'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide('axios', axios)
})

在组件中使用 axios：

<script setup>
const { axios } = useNuxtApp()

// 使用axios进行请求
const fetchData = async () => {
  const response = await axios.get('https://jsonplaceholder.typicode.com/posts')
  console.log(response.data)
}
</script>

4. 总结：全局钩子函数、中间件与插件的使用场景

• 全局钩子函数：适用于在应用生命周期的特定时刻执行某些操作（如应用创建、页面渲染、路由跳转等）。
• 中间件：用于在页面或路由请求前执行某些操作（如权限验证、重定向、数据预取等）。可以是全局的，也可以是页面级的。
• 插件：用于扩展 Nuxt 3 的功能，例如注入全局变量、注册第三方库或提供公共方法。插件会在应用启动时加载，可以为整个应用提供共享的功能。

结合使用示例

如果你想要全局管理应用的权限和用户认证，你可以结合使用插件、全局钩子和中间件：

1. 插件 用于提供一个全局的认证检查方法。
2. 全局钩子 用于初始化应用时进行某些认证操作。
3. 中间件 用于在每次路由跳转前检查用户是否登录。

// plugins/auth.js
export default defineNuxtPlugin(nuxtApp => {
  // 假设我们有一个全局的认证检查方法
  nuxtApp.provide('auth', {
    isAuthenticated: () => {
      return Boolean(localStorage.getItem('auth_token'))
    }
  })
})

// middleware/auth.js
export default defineNuxtRouteMiddleware((to, from) => {
  const { auth } = useNuxtApp()
  if (!auth.isAuthenticated()) {
    return navigateTo('/login') // 未认证，重定向到登录页
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: ['~/plugins/auth.js'],
  router: {
    middleware: ['auth']
  }
})

这种组合使用插件、钩子和中间件的方式可以有效地管理全局认证逻辑。