详细解释 `Nuxt.js` 的 `middleware` (中间件) 是如何工作的，以及其在服务器端和客户端的执行时机。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

好的，各位观众老爷，今天咱们就来聊聊 Nuxt.js 的 middleware，这玩意儿就像你家门口的保安，负责在你进门（访问页面）之前，先检查一下你的身份（权限）或者做一些其他的准备工作。

Middleware：Nuxt.js 的守门神

在 Nuxt.js 的世界里，middleware 就像一个请求拦截器，它允许你在路由导航发生之前运行一些函数。这些函数可以用来执行各种任务，例如：

验证用户身份
重定向用户到其他页面
修改请求或响应对象
添加一些全局性的变量

总之，middleware 就像一个强大的过滤器，可以让你在页面渲染之前对请求进行各种处理。

Middleware 的类型：全局、命名、路由

Nuxt.js 提供了三种类型的 middleware，它们分别有不同的应用场景：

全局 Middleware (Global Middleware):
- 这种 middleware 会应用到你的整个应用中的每一个路由。就像你家小区门口的保安，不管你进哪栋楼，都得先经过他那一关。
- 它们必须放在 middleware 目录下的 middleware/ 文件中，并且文件名必须以 .global.js 或 .global.ts 结尾。Nuxt 会自动注册它们。
- 例如，你可以创建一个名为 middleware/auth.global.js 的文件来验证用户是否已登录。
```
// middleware/auth.global.js
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useSupabaseUser() // 假设你用 Supabase 做用户认证
  if (!user.value && to.path !== '/login') {
    return navigateTo('/login')
  }
})
```
命名 Middleware (Named Middleware):
- 这种 middleware 需要你在页面或组件中显式地指定才能使用。就像你要去特定的楼，才需要经过那栋楼的保安。
- 它们也必须放在 middleware 目录下，文件名随意（但最好能反映其功能）。
- 然后在你的页面或组件中使用 definePageMeta 或者 middleware 选项来指定使用哪个 middleware。
```
// middleware/logger.js
export default defineNuxtRouteMiddleware((to, from) => {
  console.log('Route changed to:', to.path)
})
```
```
// pages/about.vue
<script setup>
definePageMeta({
  middleware: 'logger' // 使用名为 "logger" 的 middleware
})
</script>
```
路由 Middleware (Route Middleware):
- 这种 middleware 直接在路由定义中指定，只对特定的路由生效。就像你只有通过特定的门，才会触发特定的保安。
- 它们通常用于动态路由或需要针对特定路由进行处理的场景。
```
// pages/users/[id].vue
<script setup>
definePageMeta({
  middleware: [(to, from) => {
    // 只有访问 /users/:id 才会执行
    console.log(`Visiting user with ID: ${to.params.id}`)
  }]
})
</script>
```

Middleware 的执行时机：服务器端 vs. 客户端

Middleware 的一个关键概念是它的执行时机。Nuxt.js 的 middleware 可以在服务器端或客户端执行，这取决于你的配置和运行环境。

执行环境	描述	应用场景
服务器端	Middleware 在服务器端执行，这意味着它会在页面被发送到客户端之前运行。这对于需要访问服务器端资源（例如数据库）或执行身份验证的场景非常有用。	身份验证、权限控制、从数据库获取数据、执行服务器端重定向。
客户端	Middleware 在客户端执行，这意味着它会在页面加载后在浏览器中运行。这对于需要访问客户端资源（例如 cookies 或 localStorage）或执行客户端重定向的场景非常有用。	客户端重定向、存储用户偏好设置、处理客户端特定逻辑。

服务器端执行：先发制人

当 middleware 在服务器端执行时，它会在页面渲染之前运行。这意味着你可以使用 middleware 来：

验证用户身份： 检查用户是否已登录，如果没有，则重定向到登录页面。
获取数据： 从数据库或其他 API 获取数据，并将数据传递给页面组件。
执行重定向： 根据某些条件将用户重定向到其他页面。

// middleware/auth.js
export default defineNuxtRouteMiddleware((to, from) => {
  const isLoggedIn = false; // 假设我们有一个函数来检查用户是否已登录
  if (!isLoggedIn && to.path !== '/login') {
    return navigateTo('/login'); // 服务器端重定向
  }
});

在这个例子中，auth.js middleware 会在服务器端检查用户是否已登录。如果用户未登录并且尝试访问 /login 以外的任何页面，则会被重定向到 /login 页面。这种重定向是在服务器端完成的，这意味着浏览器会收到一个 302 重定向响应，并自动跳转到 /login 页面。

客户端执行：亡羊补牢

当 middleware 在客户端执行时，它会在页面加载后运行。这意味着你可以使用 middleware 来：

存储用户偏好设置： 将用户的偏好设置存储到 localStorage 或 cookies 中。
执行客户端重定向： 根据某些条件将用户重定向到其他页面。
处理客户端特定逻辑： 执行一些需要在客户端才能完成的任务。

// middleware/redirect.js
export default defineNuxtRouteMiddleware((to, from) => {
  if (process.client) { // 检查是否在客户端运行
    const shouldRedirect = false; // 假设我们有一个条件来决定是否重定向
    if (shouldRedirect) {
      window.location.href = '/somewhere-else'; // 客户端重定向
    }
  }
});

在这个例子中，redirect.js middleware 会在客户端检查 shouldRedirect 变量的值。如果该变量为 true，则使用 window.location.href 将用户重定向到 /somewhere-else 页面。需要注意的是，客户端重定向是通过 JavaScript 代码完成的，这意味着浏览器会先加载当前页面，然后再执行重定向。

如何决定在服务器端还是客户端执行？

选择在服务器端还是客户端执行 middleware 取决于你的具体需求。一般来说，如果你的 middleware 需要访问服务器端资源或执行身份验证，则应该在服务器端执行。如果你的 middleware 需要访问客户端资源或执行客户端特定逻辑，则应该在客户端执行。

服务器端： 安全性要求高，需要访问服务器端资源，SEO 优化。
客户端： 需要访问客户端资源，对性能要求较高。

Middleware 的使用方法：代码示例

让我们来看一些更具体的代码示例，以便更好地理解 middleware 的使用方法。

示例 1：身份验证 middleware

// middleware/auth.js
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useSupabaseUser() // 假设你用 Supabase 做用户认证
  if (!user.value && to.path !== '/login') {
    console.log('用户未登录，重定向到登录页面')
    return navigateTo('/login')
  }
})

这个 middleware 会检查用户是否已登录。如果用户未登录并且尝试访问 /login 以外的任何页面，则会被重定向到 /login 页面。

示例 2：权限控制 middleware

// middleware/admin.js
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useSupabaseUser() // 假设你用 Supabase 做用户认证
  if (user.value?.role !== 'admin') {
    console.warn('用户没有管理员权限，重定向到首页')
    return navigateTo('/')
  }
})

这个 middleware 会检查用户是否具有管理员权限。如果用户没有管理员权限，则会被重定向到首页。

示例 3：全局数据注入 middleware

// middleware/global-data.global.js
export default defineNuxtRouteMiddleware((to, from) => {
  const app = useNuxtApp()
  app.provide('globalData', { message: 'Hello from middleware!' })
})

这个 middleware 会向应用程序注入一个全局数据对象。你可以在任何组件中使用 useNuxtApp().$globalData 来访问这个对象。

Middleware 的注意事项

在使用 middleware 时，需要注意以下几点：

顺序： Middleware 的执行顺序很重要。全局 middleware 会在命名 middleware 之前执行。
性能： Middleware 会影响应用程序的性能。尽量减少 middleware 的数量，并优化 middleware 的代码。
错误处理： 在 middleware 中处理错误，避免导致应用程序崩溃。
避免无限循环： 确保你的 middleware 不会导致无限重定向循环。

总结

Nuxt.js 的 middleware 是一个强大的工具，可以让你在路由导航发生之前执行各种任务。通过合理地使用 middleware，你可以提高应用程序的安全性、可维护性和性能。

希望今天的讲座对你有所帮助！如果有什么疑问，欢迎随时提问。

下面是一个表格，总结了不同类型的 middleware 的特点：

类型	描述	适用场景
全局	应用于所有路由。	身份验证、全局数据注入、日志记录。
命名	需要在页面或组件中显式指定。	特定页面的权限控制、数据获取、重定向。
路由	直接在路由定义中指定，只对特定路由生效。	动态路由的处理、特定路由的参数验证。

最后，记住，middleware 就像你家门口的保安，要好好利用他们，保证你的 Nuxt.js 应用的安全和稳定！

发表回复 取消回复

发表回复取消回复