Nuxt.js 如何在全局应用中间件？

推荐答案

在 Nuxt.js 中，可以通过在 nuxt.config.js 文件中配置 router.middleware 或者在 middleware/ 目录下创建全局中间件文件来应用全局中间件。

方法一：在 nuxt.config.js 中配置全局中间件

export default {
  router: {
    middleware: 'globalMiddleware'
  }
}

方法二：在 middleware/ 目录下创建全局中间件

1. 在 middleware/ 目录下创建一个中间件文件，例如 globalMiddleware.js：

export default function ({ route, redirect }) {
  // 中间件逻辑
  if (route.path === '/restricted') {
    return redirect('/login')
  }
}

1. 然后在 nuxt.config.js 中引用这个中间件：

export default {
  router: {
    middleware: 'globalMiddleware'
  }
}

本题详细解读

什么是 Nuxt.js 中间件？

Nuxt.js 中间件是在页面渲染之前执行的函数。它们可以用于执行一些全局的逻辑，例如身份验证、日志记录、重定向等。中间件可以在页面级别或全局级别应用。

全局中间件的作用

全局中间件会在每个页面渲染之前执行，因此非常适合用于处理那些需要在每个页面都执行的逻辑，比如用户身份验证、权限检查等。

如何在 nuxt.config.js 中配置全局中间件？

在 nuxt.config.js 文件中，可以通过 router.middleware 属性来指定全局中间件。这个属性接受一个字符串或字符串数组，表示要应用的中间件名称。这些中间件文件应该放在 middleware/ 目录下。

如何在 middleware/ 目录下创建全局中间件？

1. 创建中间件文件：在 middleware/ 目录下创建一个 JavaScript 文件，例如 globalMiddleware.js。这个文件导出一个函数，函数接收一个上下文对象作为参数，可以访问 route、redirect 等属性。

2. 在 nuxt.config.js 中引用中间件：在 nuxt.config.js 文件中，通过 router.middleware 属性引用这个中间件文件。Nuxt.js 会自动加载并应用这个中间件。

示例代码

假设我们有一个需求，当用户访问 /restricted 路径时，需要重定向到 /login 页面。我们可以通过以下步骤实现：

1. 在 middleware/ 目录下创建 globalMiddleware.js 文件：

export default function ({ route, redirect }) {
  if (route.path === '/restricted') {
    return redirect('/login')
  }
}

1. 在 nuxt.config.js 中引用这个中间件：

export default {
  router: {
    middleware: 'globalMiddleware'
  }
}

这样，每当用户访问 /restricted 路径时，都会被重定向到 /login 页面。