什么是路由守衛(wèi)

路由守衛(wèi)是Vue Router提供的一種機制，用于在導航過程中對路由進行控制和管理。通過使用路由守衛(wèi)，你可以在路由切換前、切換后以及錯誤處理時執(zhí)行相應的邏輯。

Vue Router提供了三種類型的路由守衛(wèi)：
1、全局前置守衛(wèi)
2、路由獨享的守衛(wèi)
3、組件內的守衛(wèi)

全局前置守衛(wèi)

全局前置守衛(wèi)（ router.beforeEach）：這些守衛(wèi)會在路由切換之前被調用，可以用來進行權限驗證、登錄狀態(tài)檢查等操作。常見的全局前置守衛(wèi)有beforeEach。

語法 ：

router.beforeEach((to, from, next) => {
  // 在每次路由導航觸發(fā)前執(zhí)行的邏輯  
});

在router/index.js中的具體配置

// index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
  // 路由配置
  routes: [
    // ...定義路由...
  ]
});
router.beforeEach((to, from, next) => {
  // 全局前置守衛(wèi)邏輯
});
export default router;

在上述示例中，我們通過 router.beforeEach 方法注冊了一個全局前置守衛(wèi)。在每次路由導航之前，該守衛(wèi)會被調用。守衛(wèi)的回調函數接收三個參數：

• to：即將跳轉的目標路由對象
• from：當前導航正要離開的路由對象
• next：用于控制導航行為的回調函數

在守衛(wèi)的回調函數中，你可以根據業(yè)務需求執(zhí)行相應的操作，如驗證用戶權限、檢查登錄狀態(tài)、取消導航或重定向到其他路由。next 函數用于控制導航的繼續(xù)或中斷。

• 若要中斷當前導航并取消跳轉，可以調用 next(false)。
• 若要重定向到其他路由，并且希望中斷當前導航，可以調用 next('/other-route')。
• 若無需中斷導航，則調用 next() 允許導航繼續(xù)。

全局前置守衛(wèi)（Global before Guards）可以在以下場景中發(fā)揮作用：

• 登錄驗證：你可以使用全局前置守衛(wèi)來驗證用戶是否已登錄。通過檢查用戶的登錄狀態(tài)或者驗證用戶的身份信息，可以防止未經授權的用戶訪問需要登錄權限的頁面。
• 權限控制：全局前置守衛(wèi)可以用于實現基于角色或權限的訪問控制。通過在守衛(wèi)中檢查用戶的角色或權限，可以限制用戶只能訪問其具備權限的頁面，并在沒有權限時進行相應的處理，如跳轉到錯誤頁面或提示無權限信息。
• 路由攔截：在進行路由導航之前，你可以使用全局前置守衛(wèi)來攔截、修改或重定向導航。根據特定的條件或業(yè)務需求，你可以在守衛(wèi)中對導航進行處理，如取消導航、修改目標路由或跳轉到其他頁面。
• 數據預處理：有時，在進入某個路由之前，你可能需要對相關數據進行加載、初始化或驗證等操作。全局前置守衛(wèi)可以幫助你在導航發(fā)生前執(zhí)行這些預處理任務，確保數據的準備工作完成后再進入目標路由。

路由獨享的守衛(wèi)

路由獨享的守衛(wèi)（beforeEnter）：這些守衛(wèi)可以直接在路由配置中定義，只對特定的路由生效?？梢栽谶M入該路由前、離開該路由前或兩者之間執(zhí)行相應邏輯。常見的路由獨享守衛(wèi)有beforeEnter。

語法

const router = new VueRouter({
  routes: [
    {
      path: '/example',//具體跳轉路徑
      component: ExampleComponent,//具體跳轉頁面
      beforeEnter: (to, from, next) => {
        // 在單個路由的獨享守衛(wèi)邏輯
      }
    },
    // ...
  ]
});

在router/index.js中的具體配置

// index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
  {
    path: '/example',
    component: ExampleComponent,
    beforeEnter: (to, from, next) => {
      // 在單個路由的獨享守衛(wèi)邏輯
    }
  },
  // ...其他路由配置...
];
const router = new VueRouter({
  routes
});
export default router;

路由獨享的守衛(wèi)在以下場景中非常有用：

• 鑒權和權限控制：你可以使用路由獨享的守衛(wèi)來驗證用戶的身份和權限。例如，對于需要登錄才能訪問的特定路由，可以在其獨享守衛(wèi)中檢查用戶是否已經登錄，如果未登錄則阻止導航到該路由。
• 數據加載和處理：有時候，在進入某個路由之前需要先加載一些數據或執(zhí)行一些異步操作。在路由獨享的守衛(wèi)中，你可以調用 API 請求數據，確保數據加載完畢后再繼續(xù)導航到目標路由。
• 導航控制：某些情況下，你可能希望根據一定條件來控制導航行為，如取消導航、重定向到其他路由等。通過在路由獨享的守衛(wèi)中進行條件判斷，并調用適當的導航方法，可以實現對導航行為的精確控制。
• 日志記錄或埋點：如果你需要在特定的路由上進行日志記錄或進行統(tǒng)計分析，可以使用路由獨享的守衛(wèi)來觸發(fā)相應的操作。例如，在進入某個路由時記錄訪問日志或發(fā)送統(tǒng)計數據。

組件內的守衛(wèi)

組件內的守衛(wèi)：這些守衛(wèi)是直接寫在組件內部的方法，用于對組件內部的路由變化做出反應。常見的組件內守衛(wèi)有beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。

組件內的守衛(wèi)允許你在組件內部針對組件生命周期的不同階段執(zhí)行相應的邏輯。

以下是Vue.js提供的組件內的守衛(wèi)：

• beforeRouteEnter：在進入路由前被調用，但在組件實例被創(chuàng)建之前被調用，因此無法訪問組件實例?？梢酝ㄟ^傳入一個回調來獲取組件實例或使用Promise來延遲進入。
• beforeRouteLeave：在離開當前路由時被調用?？梢杂糜诖_認是否離開頁面、保存臨時數據等操作。
• beforeRouteUpdate：在當前路由被復用時被調用，即參數發(fā)生變化但是組件實例仍然被復用。可以在該守衛(wèi)中對參數的變化作出響應。

這些守衛(wèi)可以直接定義在組件的選項中
語法

export default {
  // ...
  beforeRouteEnter(to, from, next) {
    // 在組件實例創(chuàng)建之前調用
    // 可以使用回調函數或返回一個Promise延遲進入
  },
  beforeRouteLeave(to, from, next) {
    // 在離開當前路由時調用
    // 可以進行確認、保存數據等操作
  },
  beforeRouteUpdate(to, from, next) {
    // 在當前路由被復用時調用
    // 可以對參數的變化作出響應
  }
  // ...
}

組件內的守衛(wèi)在以下場景中非常有用：

• 驗證用戶身份：在進入某個路由前，可以通過 beforeRouteEnter 守衛(wèi)驗證用戶的登錄狀態(tài)或權限。如果用戶未登錄或沒有足夠的權限訪問該路由，可以取消導航或重定向到其他頁面。
• 加載異步數據：在進入某個路由前，可以使用 beforeRouteEnter 守衛(wèi)獲取異步數據，并在數據加載完成后再渲染組件。這樣可以確保組件在數據加載完成后才會顯示，避免因數據未加載完成而出現顯示問題。
• 取消導航：在離開當前路由前，可以使用 beforeRouteLeave 守衛(wèi)進行一些判斷和操作，例如檢查表單是否被修改過，詢問用戶是否需要保存未提交的數據。根據用戶的選擇，可以取消導航或繼續(xù)進行下一個路由。
• 條件渲染和動態(tài)路由：在 beforeRouteUpdate 守衛(wèi)中，可以根據當前路由參數的變化，更新組件的數據或重新請求數據。這樣可以實現根據不同的路由參數動態(tài)展示內容或刷新組件的狀態(tài)。

舉例說明

在 Vue 開發(fā)中，你可以通過路由導航守衛(wèi)來實現在未登錄狀態(tài)下先展示登錄頁面而不展示首頁。

路由導航守衛(wèi)提供了一些鉤子函數，可以在路由導航過程中進行攔截和控制。其中，beforeEach 導航守衛(wèi)可以在每次路由切換前被觸發(fā)。

使用路由導航守衛(wèi)來實現在未登錄狀態(tài)下先展示登錄頁面：

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
// 全局的路由導航守衛(wèi)
router.beforeEach((to, from, next) => {
  const isLoggedIn = checkUserLoggedIn(); // 根據實際情況判斷用戶是否已登錄
  if (to.path !== '/login' && !isLoggedIn) {
    // 如果用戶未登錄且訪問的不是登錄頁，則重定向到登錄頁
    next('/login');
  } else {
    // 已登錄或者訪問的是登錄頁，則正常跳轉
    next();
  }
});
new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app');

上述代碼中，我們在 beforeEach 導航守衛(wèi)中進行判斷，如果用戶未登錄且訪問的不是登錄頁（即非 /login 路徑），則使用 next('/login') 將用戶重定向到登錄頁；否則，如果用戶已登錄或者訪問的是登錄頁，則繼續(xù)正常跳轉。

這樣，在每次路由切換之前都會進行登錄狀態(tài)的檢查，并根據檢查結果來決定是否重定向到登錄頁。這樣就可以先展示登錄頁而不先展示首頁。

當用戶訪問其他需要登錄才能查看的頁面時，會被攔截并跳轉到登錄頁面。用戶在登錄成功之后，再跳轉到原本要訪問的頁面。

請注意，checkUserLoggedIn() 是一個自定義函數，用于實際判斷用戶是否已登錄，請根據你的實際需求和認證邏輯來編寫該函數。

到此這篇關于Vue路由守衛(wèi)詳解的文章就介紹到這了,更多相關Vue路由守衛(wèi)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論