HookAll (开发中...)

外观

本页目录

nuxtjs 中间件 ​

Nuxt.js 中间件是在页面渲染前执行的函数，用于处理通用逻辑，如认证检查、数据预加载或权限验证。它允许您在路由导航前后注入自定义代码，确保用户请求按预期处理。

什么是中间件 ​

中间件是 Nuxt 应用中的一层处理程序，位于路由和页面组件之间。它可以访问上下文对象 (如 route、redirect 等)，让您控制导航流程。

示意图：

客户端请求
    |
    v
路由匹配
    |
    v
中间件执行（可多个）
    |
    v
页面组件渲染

如果中间件中调用 redirect，流程会中断并跳转：

中间件执行
    |
    |--- 条件满足 ---> 重定向到其他页面
    |
    v
继续渲染原页面

中间件类型 ​

Nuxt.js 支持三种中间件：

  • 匿名中间件：直接在页面中定义，仅对该页面生效。
  • 命名中间件：在 middleware/ 目录创建文件，通过名称在页面中引用。
  • 全局中间件：以 .global 后缀命名的中间件，自动在每个页面运行。

示意图：

middleware/
  |-- auth.global.js    (全局中间件，所有页面自动运行)
  |-- log.js           (命名中间件，需手动引用)

页面使用示例：

页面组件
  |
  |-- 匿名中间件 (内联定义)
  |-- 命名中间件 (通过 middleware 属性引用)
  |-- 全局中间件 (自动应用)

工作原理 ​

中间件按顺序执行，每个中间件可以异步操作。执行顺序为：全局中间件 → 命名中间件 → 匿名中间件。

示意图：

请求进入
    |
    v
全局中间件执行
    |-- 例如：身份验证
    |
    v
命名中间件执行（按页面定义顺序）
    |-- 例如：权限检查
    |
    v
匿名中间件执行（页面内定义）
    |-- 例如：数据加载
    |
    v
页面渲染

如果任何中间件调用 redirect 或抛出错误，流程立即终止：

中间件执行
    |
    |-- 检测未登录 --[redirect]--> 登录页面
    |-- 发生错误 --[error]--> 错误页面
    |
    v
正常继续

定义和使用 ​

创建命名中间件 ​

在 middleware/ 目录下创建文件，例如 auth.js：

javascript
export default function ({ route, redirect }) {
  // 纯文本示意图：检查路由
  // 如果访问 /admin 且未登录，重定向到 /login
  if (route.path === '/admin' && !isAuthenticated) {
    return redirect('/login')
  }
}

页面中使用中间件 ​

在页面组件中通过 middleware 属性引用：

javascript
export default {
  middleware: ['auth', 'log'], // 执行顺序：auth → log
}

匿名中间件 ​

直接在页面中定义：

javascript
export default {
  middleware({ store, redirect }) {
    // 示意图：条件检查
    // 如果 store 中无数据，重定向
    if (!store.state.user) {
      return redirect('/')
    }
  },
}

中间件效果 ​

中间件常用于：

  • 认证保护：限制未登录用户访问特定页面。
  • 日志记录：跟踪页面访问。
  • 数据预取：在页面渲染前加载必要数据。

示意图：

用户请求 /dashboard
    |
    v
auth 中间件运行
    |-- 检查 token
    |-- 无效？--[redirect]--> /login
    |
    v
dashboard 页面渲染

通过中间件，您可以构建安全、高效的 Nuxt 应用，确保逻辑在路由级别统一处理。

在 GitHub 上编辑此页