使用 defineNuxtRouteMiddleware 建立路由中介軟體

Amd794發表於2024-08-10
UX路由

title: 使用 defineNuxtRouteMiddleware 建立路由中介軟體
date: 2024/8/10
updated: 2024/8/10
author: cmdragon

excerpt:
本篇文章介紹瞭如何使用 defineNuxtRouteMiddleware 建立和應用路由中介軟體。透過示例演示瞭如何處理錯誤頁面和身份驗證邏輯。隨著對 Nuxt.js 中介軟體的理解，你可以更靈活地控制應用的路由行為，從而提升使用者體驗。

categories:

  • 前端開發

tags:

  • Nuxt3
  • 路由
  • 中介軟體
  • 錯誤處理
  • 認證
  • 重定向
  • 定製邏輯

image
image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

使用 defineNuxtRouteMiddleware 建立路由中介軟體

在 Nuxt.js 中，路由中介軟體是一種強大的機制，可以在路由進入之前處理特定的邏輯。例如，你可以根據使用者的身份驗證狀態來重定向使用者，或者在某些條件不滿足時顯示錯誤頁面。

什麼是路由中介軟體？

路由中介軟體是一個函式，它在路由變化之前執行，允許我們在訪問特定頁面時新增邏輯。它可以幫助你進行身份驗證、授權檢查、日誌記錄等。

路由中介軟體的結構

路由中介軟體的基本結構如下所示：

const middleware = (to, from) => {
  // 處理邏輯
};

export default defineNuxtRouteMiddleware(middleware);
  • to：下一個路由的位置物件。
  • from：當前路由的位置物件。

建立和使用路由中介軟體

1. 顯示錯誤頁面的中介軟體

我們首先建立一箇中介軟體，用於檢測特定條件並顯示錯誤頁面。如果引數 id 存在且為 1，我們將丟擲一個404錯誤。

建立 middleware/error.ts


export default defineNuxtRouteMiddleware((to) => {
  if (to.params.id === '1') {
    throw createError({ statusCode: 404, statusMessage: '頁面未找到' });
  }
});

在這個例子中，如果使用者訪問的路由包含引數 id 且其值為 1，則丟擲一個404的錯誤，Nuxt會自動重定向到定義的錯誤頁面。

2. 基於身份驗證狀態的重定向

接下來，我們建立一箇中介軟體，用於檢查使用者是否已經經過身份驗證。如果沒有驗證，使用者將被重定向到登入頁面。

建立 middleware/auth.ts


export default defineNuxtRouteMiddleware((to, from) => {
  const auth = useState('auth');

  // 檢查使用者是否登入
  if (!auth.value.isAuthenticated) {
    return navigateTo('/login'); // 重定向到登入頁面
  }

  // 如果使用者不在儀表盤頁面，則重定向到儀表盤
  if (to.path !== '/dashboard') {
    return navigateTo('/dashboard');
  }
});

在上面的程式碼中，我們使用 useState 獲取使用者的身份驗證狀態。如果使用者沒有登入，我們使用 navigateTo 進行重定向，導向 /login 頁面。如果使用者不在儀表盤頁面，我們也將其重定向到儀表盤。

中介軟體的註冊

在建立好中介軟體後，Nuxt 會自動識別在 middleware/ 目錄下的中介軟體檔案。你可以透過在頁面元件中指定中介軟體來使用它們。例如，在一個頁面元件中使用上面的中介軟體：

在頁面中使用中介軟體

<template>
  <div>
    <h1>歡迎來到儀表盤</h1>
  </div>
</template>

<script>
definePageMeta({
  middleware: ["auth"]
  // 或 middleware: 'auth'
})
</script>

全域性使用中介軟體

如果您希望讓每個路由都使用某個中介軟體，可以在 nuxt.config.ts 檔案中註冊全域性中介軟體

總結

路由中介軟體在管理使用者訪問許可權和錯誤處理方面非常有用。透過 defineNuxtRouteMiddleware，您可以輕鬆地定義中介軟體，控制使用者如何在 Nuxt 應用程式中流動。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：使用 defineNuxtRouteMiddleware 建立路由中介軟體 | cmdragon's Blog

往期文章歸檔：

  • 使用 defineNuxtComponent`定義 Vue 元件 | cmdragon's Blog
  • 使用 createError 建立錯誤物件的詳細指南 | cmdragon's Blog
  • 清除 Nuxt 狀態快取：clearNuxtState | cmdragon's Blog
  • 清除 Nuxt 資料快取：clearNuxtData | cmdragon's Blog
  • 使用 clearError 清除已處理的錯誤 | cmdragon's Blog
  • 使用 addRouteMiddleware 動態新增中間 | cmdragon's Blog
  • 使用 abortNavigation 阻止導航 | cmdragon's Blog
  • 使用 $fetch 進行 HTTP 請求 | cmdragon's Blog
  • 使用 useState 管理響應式狀態 | cmdragon's Blog
  • 使用 useServerSeoMeta 最佳化您的網站 SEO | cmdragon's Blog
  • 使用 useSeoMeta 進行 SEO 配置 | cmdragon's Blog
  • Nuxt.js必讀：輕鬆掌握執行時配置與 useRuntimeConfig | cmdragon's Blog
  • Nuxt.js 路由管理：useRouter 方法與路由中介軟體應用 | cmdragon's Blog
  • useRoute 函式的詳細介紹與使用示例 | cmdragon's Blog
  • 使用 useRequestURL 組合函式訪問請求URL | cmdragon's Blog
  • Nuxt.js 環境變數配置與使用 | cmdragon's Blog
  • 服務端渲染中的資料獲取：結合 useRequestHeaders 與 useFetch | cmdragon's Blog
  • 使用 useRequestEvent Hook 訪問請求事件 | cmdragon's Blog
  • 使用 useNuxtData 進行高效的資料獲取與管理 | cmdragon's Blog

相關文章