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

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

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

全局前置守衛(wèi)

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

語法 ：

router.beforeEach((to, from, next) => {
  // 在每次路由導(dǎo)航觸發(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)。在每次路由導(dǎo)航之前，該守衛(wèi)會被調(diào)用。守衛(wèi)的回調(diào)函數(shù)接收三個參數(shù)：

• to：即將跳轉(zhuǎn)的目標路由對象
• from：當前導(dǎo)航正要離開的路由對象
• next：用于控制導(dǎo)航行為的回調(diào)函數(shù)

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

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

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

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

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

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

語法

const router = new VueRouter({
  routes: [
    {
      path: '/example',//具體跳轉(zhuǎn)路徑
      component: ExampleComponent,//具體跳轉(zhuǎn)頁面
      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)在以下場景中非常有用：

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

組件內(nèi)的守衛(wèi)

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

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

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

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

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

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

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

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

舉例說明

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

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

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

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

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

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

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

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

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

最新評論