中间件：它们是什么以及如何在 Nuxt.JS 中使用它们

什么是中间件？

在前端，中间件是导航到新页面之前执行的代码块，允许我们在应用程序中执行各种控制，例如:

• 身份验证：检查用户是否已登录，否则将被重定向到登录屏幕。
• 权限：检查用户是否有权限访问该页面，如果没有，则重定向到有权限的页面。
• 日志：保存有关页面信息的信息。

中间件作为中间层，从页面加载开始直到完成渲染。

此中间件功能存在于现代前端框架中，例如 Next.js 和 Nuxt.JS。

在这篇文章中，我将教你如何在 Nuxt.JS 中实现路由中间件。

以不太技术性的方式使用中间件

为了更简单地解释，我打个比方：

想象一下，你要加入一个派对，在这个过程中你会经过三名派对保安人员，他们就是“中间件”，每人负责执行一项具体的操作。

1. 第一个保安会检查您是否有票，是否有效，类似于身份验证中间件，如果您没有票，您将被重定向到售票处或登录屏幕。

2. 第二个保安会检查你是否达到法定年龄，这是进入聚会的基本要求，类似于权限中间件。如果您没有必要的进入权限，您将被重定向到队伍队列之外。

3. 第三个也是最后一个保安会给你一个识别手环，表明你是否有权访问聚会的 VIP 区域，类似于可以向请求添加数据的中间件。

最后，完成前面的所有步骤后，您就可以自由进入派对房间了。

中间件类型

在 Nuxt.js 中，我们有以下类型的中间件：

• 全球
• 内联或匿名
• 提名者

1. 全局中间件在 /middleware 文件夹中创建并在所有页面上运行。您需要添加全局后缀。

/*
  Exemplo de middleware Global:
  Esse middleware verifica se a URL/rota buscada existe.
  Caso não exista o usuário é redirecionado para página de links.

  Nome e Diretório do arquivo:
  /middleware/notFound.global.js
*/

export default defineNuxtRouteMiddleware((to) => {
  const hasFoundRoute = to.matched.length > 0;

  if (!hasFoundRoute) {
    return navigateTo({
      path: "/links"
    });
  }
});

1. 内联或匿名中间件是特定于页面的中间件，直接在 Nuxt 的页面文件中定义；这限制了代码的重用，因为它不能轻松地与其他页面共享。

/*
  Exemplo de middleware inline:
  Esse middleware verifica se os dados estão presentes na store.
  Caso não esteja, os dados serão requisitados.
*/

<script setup lang="ts">
import { useStore } from 'vuex';

definePageMeta({
  middleware: [
    async function (to, from) {
      const store = useStore();
      if (!store.state.user) {
        await store.dispatch("fetchUser");
      }
    },
  ],
});
</script>

1. 命名中间件在 /middleware 文件夹内创建。

/*
  Exemplo de middleware Nomeado:
  Esse middleware verifica o usuário está logado.
  Caso não esteja logado, ele é redirecionado para página de login.

  Nome e Diretório do arquivo:
  /middleware/auth.js
*/

export default defineNuxtRouteMiddleware((to, from) => {
  const { $store } = useNuxtApp();

  if (!$store.auth?.loggedIn) {
    return navigateTo("/login");
  }
});

在命名中间件中，需要定义哪些页面使用某个中间件，实现此目的的方法之一是更改将使用该中间件的页面的文件：

<script setup>
definePageMeta({
  middleware: "auth-admin"
});
</script>

同样重要的是，即使您以 PascalCase 或 CamelCase 等模式命名中间件文件，文件名也会标准化为 kebab-case 模式。

结论

希望通过这篇文章，我能够简单快速地向您解释在 Nuxt.JS 中创建和使用中间件的要点??‍♂️。

如果您需要更多有关Nuxt.JS中中间件的信息，可以搜索官方文档。

以上是中间件：它们是什么以及如何在 Nuxt.JS 中使用它们的详细内容。更多信息请关注PHP中文网其他相关文章！