路由導航守衛中的全局前置守衛（Global Before Guards）是Vue Router中的一個重要概念。當路由即將改變（導航觸發）時，這些守衛會按照創建順序調用。它們允許你在路由跳轉之前執行一些操作或判斷，例如檢查用戶是否登錄、是否擁有訪問目標路由的權限等。
全局前置守衛的執行時機是在路由切換之前，因此它們可以用于在路由跳轉之前進行攔截或處理一些邏輯。這些守衛是異步解析執行的，這意味著在所有的守衛都resolve之前，導航會一直處于等待狀態。
使用全局前置守衛的方法是通過router.beforeEach函數來注冊一個守衛。這個函數接收三個參數：to（即將要進入的目標路由）、from（當前導航正要離開的路由）以及next（一個必須調用的函數來resolve這個鉤子）。
下面是一個簡單的示例：
const router = new VueRouter({ ... }) | |
router.beforeEach((to, from, next) => { | |
// 檢查用戶是否登錄 | |
if (!isLoggedIn()) { | |
// 如果用戶未登錄，重定向到登錄頁面 | |
next('/login') | |
} else { | |
// 如果用戶已登錄，檢查是否擁有訪問目標路由的權限 | |
if (!hasPermission(to)) { | |
// 如果用戶沒有權限，重定向到無權限頁面 | |
next('/no-permission') | |
} else { | |
// 如果用戶有權限，繼續導航 | |
next() | |
} | |
} | |
}) |
在上面的示例中，isLoggedIn和hasPermission是假設的函數，你需要根據實際的業務邏輯來實現它們。next函數用于決定下一步的操作：如果調用next()，則繼續導航；如果調用next('/somePath')，則導航到特定的路由；如果調用next(false)，則取消導航。
要使用全局前置守衛，你需要首先確保你正在使用Vue Router，并且已經創建了一個router實例。然后，你可以通過調用router.beforeEach方法來注冊一個全局前置守衛。
以下是如何使用全局前置守衛的基本步驟：
- 引入Vue Router：確保你已經在你的項目中引入了Vue Router，并且已經創建了一個router實例。
- 定義全局前置守衛：通過調用
router.beforeEach方法來定義一個全局前置守衛。這個方法接收一個回調函數作為參數，這個回調函數就是你的前置守衛邏輯。 - 編寫守衛邏輯：在回調函數中，你可以編寫你的前置守衛邏輯。這個函數接收三個參數：
to（即將要進入的目標路由對象）、from（當前導航正要離開的路由對象）和next（一個必須調用的函數來解析這個鉤子）。 - 使用
next函數控制路由：在守衛邏輯中，你可以根據條件調用next函數來控制路由的跳轉。例如，你可以根據用戶的登錄狀態來決定是否允許跳轉到目標路由。 - 結束守衛：確保在守衛邏輯的最后調用
next函數，否則路由將不會繼續跳轉。
以下是一個簡單的示例：
import { createRouter, createWebHistory } from 'vue-router' | |
// 定義路由 | |
const routes = [ | |
// ...你的路由定義 | |
] | |
const router = createRouter({ | |
history: createWebHistory(), | |
routes, | |
}) | |
// 注冊全局前置守衛 | |
router.beforeEach((to, from, next) => { | |
// 檢查用戶是否登錄，這里只是一個示例，你需要根據你的實際情況來實現這個邏輯 | |
if (!isUserLoggedIn()) { | |
// 如果用戶未登錄，重定向到登錄頁面 | |
next('/login') | |
} else { | |
// 如果用戶已登錄，繼續導航到目標路由 | |
next() | |
} | |
}) | |
// 確保你的應用使用了這個router實例 | |
// 例如，在Vue 3中，你可以在創建應用實例時傳入router | |
const app = createApp(App) | |
app.use(router) | |
app.mount('#app') |
在這個示例中，isUserLoggedIn是一個假設的函數，你需要根據你的實際情況來實現它。如果用戶未登錄，我們調用next('/login')來重定向到登錄頁面；否則，我們調用next()來繼續導航到目標路由。
