Nuxt.js 中的 middleware 目录有什么作用？

推荐答案

Nuxt.js 中的 middleware 目录用于定义和应用中间件。中间件是在页面渲染之前执行的函数，可以用来处理一些全局的逻辑，比如用户身份验证、权限检查、日志记录等。中间件可以在页面级别或布局级别应用，也可以在全局范围内应用。

本题详细解读

1. 中间件的定义

在 Nuxt.js 项目中，middleware 目录通常位于项目的根目录下。你可以在 middleware 目录中创建 JavaScript 文件来定义中间件。每个中间件文件应该导出一个函数，这个函数接收 context 对象作为参数，context 对象包含了 Nuxt.js 应用的各种上下文信息，比如 req、res、store 等。

// middleware/auth.js
export default function ({ store, redirect }) {
  // 如果用户未登录，重定向到登录页面
  if (!store.state.auth.loggedIn) {
    return redirect('/login')
  }
}

2. 中间件的应用

中间件可以在页面、布局或全局范围内应用。

• 页面级别：在页面组件中使用 middleware 属性来应用中间件。

// pages/dashboard.vue
export default {
  middleware: 'auth'
}

• 布局级别：在布局组件中使用 middleware 属性来应用中间件。

// layouts/default.vue
export default {
  middleware: 'auth'
}

• 全局范围：在 nuxt.config.js 中使用 router.middleware 属性来应用全局中间件。

// nuxt.config.js
export default {
  router: {
    middleware: 'auth'
  }
}

3. 中间件的执行顺序

中间件的执行顺序遵循以下规则：

1. 全局中间件最先执行。
2. 布局中间件在全局中间件之后执行。
3. 页面中间件在布局中间件之后执行。

4. 中间件的常见用途

• 身份验证：检查用户是否已登录，未登录则重定向到登录页面。
• 权限检查：根据用户角色或权限决定是否允许访问某个页面。
• 日志记录：记录用户访问的页面或操作。
• 数据预取：在页面渲染之前获取必要的数据。

通过合理使用中间件，可以有效地管理和控制 Nuxt.js 应用中的逻辑流程。