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

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

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

全局前置守衛(wèi)

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

語(yǔ)法 ：

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;

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

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

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

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

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

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

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

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

語(yǔ)法

const router = new VueRouter({
  routes: [
    {
      path: '/example',//具體跳轉(zhuǎn)路徑
      component: ExampleComponent,//具體跳轉(zhuǎn)頁(yè)面
      beforeEnter: (to, from, next) => {
        // 在單個(gè)路由的獨(dú)享守衛(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) => {
      // 在單個(gè)路由的獨(dú)享守衛(wèi)邏輯
    }
  },
  // ...其他路由配置...
];
const router = new VueRouter({
  routes
});
export default router;

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

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

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

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

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

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

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

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

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

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

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

舉例說(shuō)明

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

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

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

// 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ù)實(shí)際情況判斷用戶(hù)是否已登錄
  if (to.path !== '/login' && !isLoggedIn) {
    // 如果用戶(hù)未登錄且訪問(wèn)的不是登錄頁(yè)，則重定向到登錄頁(yè)
    next('/login');
  } else {
    // 已登錄或者訪問(wèn)的是登錄頁(yè)，則正常跳轉(zhuǎn)
    next();
  }
});
new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app');

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

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

當(dāng)用戶(hù)訪問(wèn)其他需要登錄才能查看的頁(yè)面時(shí)，會(huì)被攔截并跳轉(zhuǎn)到登錄頁(yè)面。用戶(hù)在登錄成功之后，再跳轉(zhuǎn)到原本要訪問(wèn)的頁(yè)面。

請(qǐng)注意，checkUserLoggedIn() 是一個(gè)自定義函數(shù)，用于實(shí)際判斷用戶(hù)是否已登錄，請(qǐng)根據(jù)你的實(shí)際需求和認(rèn)證邏輯來(lái)編寫(xiě)該函數(shù)。

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

最新評(píng)論