中間件：它們是什麼以及如何在 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中文網其他相關文章！