1 Vue 路由與導(dǎo)航守衛(wèi)

1.1 Vue 路由簡(jiǎn)介

Vue 路由是用于構(gòu)建單頁(yè)應(yīng)用程序（SPA）的官方路由庫(kù)。它允許開(kāi)發(fā)者根據(jù)不同的 URL 地址，將頁(yè)面切換到對(duì)應(yīng)的組件上，實(shí)現(xiàn)頁(yè)面之間的無(wú)刷新跳轉(zhuǎn)。

在 Vue 路由中，我們可以定義一組路由規(guī)則，每個(gè)路由規(guī)則都映射一個(gè) URL 地址和對(duì)應(yīng)的組件。當(dāng)用戶(hù)訪(fǎng)問(wèn)某個(gè) URL 地址時(shí)，路由會(huì)根據(jù)配置的規(guī)則找到匹配的組件，并將其渲染到指定的位置。

Vue 路由提供了多種導(dǎo)航方式，包括普通的鏈接跳轉(zhuǎn)、編程式導(dǎo)航以及通過(guò)瀏覽器前進(jìn)和后退按鈕進(jìn)行導(dǎo)航等。

1.2 導(dǎo)航守衛(wèi)概述

導(dǎo)航守衛(wèi)是 Vue 路由提供的一種功能，用于在路由切換過(guò)程中進(jìn)行控制和管理。它可以讓開(kāi)發(fā)者在路由切換前、切換后或者切換取消時(shí)執(zhí)行一些特定的邏輯操作。

導(dǎo)航守衛(wèi)主要有以下幾個(gè)鉤子函數(shù)：

• beforeEach: 在每次路由切換前被調(diào)用，可以用來(lái)進(jìn)行全局的權(quán)限驗(yàn)證或其他前置操作。
• afterEach: 在每次路由切換后被調(diào)用，可以用來(lái)進(jìn)行統(tǒng)計(jì)或其他后置操作。
• beforeResolve: 在每次路由切換前被調(diào)用，與beforeEach類(lèi)似，但在全局 afterEach 調(diào)用之前被調(diào)用。
• beforeEnter: 在單個(gè)路由配置中定義的鉤子函數(shù)，在進(jìn)入該路由前被調(diào)用。

此外，還有兩種特殊的導(dǎo)航守衛(wèi)：

• beforeRouteUpdate: 在當(dāng)前路由復(fù)用時(shí)調(diào)用，比如從 /user/1 導(dǎo)航到 /user/2。
• beforeRouteLeave: 在離開(kāi)當(dāng)前路由前調(diào)用，可以用來(lái)提示用戶(hù)保存未保存的數(shù)據(jù)。

通過(guò)使用導(dǎo)航守衛(wèi)，我們可以實(shí)現(xiàn)諸如登錄驗(yàn)證、權(quán)限控制、頁(yè)面跳轉(zhuǎn)攔截等功能。

2 實(shí)現(xiàn)訪(fǎng)問(wèn)攔截的核心概念

2.1 路由守衛(wèi)介紹

2.1.1 前置守衛(wèi)（beforeEach）

前置守衛(wèi)是在路由切換前被調(diào)用的鉤子函數(shù)。可以通過(guò)注冊(cè)全局前置守衛(wèi)或者在單個(gè)路由配置中定義的 beforeEnter 鉤子來(lái)實(shí)現(xiàn)。

使用前置守衛(wèi)可以進(jìn)行一些全局的權(quán)限驗(yàn)證或其他前置操作，例如檢查用戶(hù)是否登錄、校驗(yàn)用戶(hù)權(quán)限等。如果需要阻止當(dāng)前導(dǎo)航，則可以調(diào)用 next(false)。

2.1.2 后置鉤子（afterEach）

后置鉤子是在路由切換后被調(diào)用的鉤子函數(shù)。它沒(méi)有能力改變導(dǎo)航本身，只能做一些統(tǒng)計(jì)或其他后置操作。

后置鉤子不接收 next 函數(shù)參數(shù)，因?yàn)闊o(wú)法改變導(dǎo)航。

2.1.3 解析守衛(wèi)（beforeResolve）

解析守衛(wèi)是在路由組件準(zhǔn)備就緒之前被調(diào)用的鉤子函數(shù)。它類(lèi)似于全局前置守衛(wèi)，但在全局 afterEach 調(diào)用之前被調(diào)用。

解析守衛(wèi)可以用來(lái)處理異步路由組件的加載過(guò)程，確保在渲染組件之前獲取到必要的數(shù)據(jù)。

2.2 鑒權(quán)邏輯設(shè)計(jì)

鑒權(quán)（Authorization）是基于權(quán)限的訪(fǎng)問(wèn)控制系統(tǒng)的核心概念。在設(shè)計(jì)鑒權(quán)邏輯時(shí)，通常需要考慮以下幾個(gè)方面：

• 角色與權(quán)限的定義：確定系統(tǒng)中的角色和對(duì)應(yīng)的權(quán)限，并將其進(jìn)行清晰的定義和劃分。
• 用戶(hù)認(rèn)證：實(shí)現(xiàn)用戶(hù)登錄驗(yàn)證機(jī)制，確保只有經(jīng)過(guò)認(rèn)證的用戶(hù)才能訪(fǎng)問(wèn)受限資源。
• 路由權(quán)限控制：根據(jù)用戶(hù)的角色和權(quán)限，在路由導(dǎo)航守衛(wèi)中進(jìn)行權(quán)限驗(yàn)證，決定是否允許用戶(hù)訪(fǎng)問(wèn)某個(gè)頁(yè)面或執(zhí)行某個(gè)操作。
• 組件級(jí)別的權(quán)限控制：在組件內(nèi)部根據(jù)用戶(hù)的角色和權(quán)限，動(dòng)態(tài)展示或隱藏特定功能模塊或按鈕。
• 后端接口權(quán)限控制：在后端接口層面進(jìn)行權(quán)限驗(yàn)證，防止未經(jīng)授權(quán)的請(qǐng)求訪(fǎng)問(wèn)敏感數(shù)據(jù)或執(zhí)行重要操作。

通過(guò)合理設(shè)計(jì)和實(shí)現(xiàn)鑒權(quán)邏輯，可以有效地保護(hù)系統(tǒng)的安全性和數(shù)據(jù)的完整性。

2.3 登錄驗(yàn)證機(jī)制

利用 Vue 路由導(dǎo)航守衛(wèi)可以很方便地實(shí)現(xiàn)用戶(hù)登錄驗(yàn)證機(jī)制。

首先，在全局前置守衛(wèi)（beforeEach）中檢查用戶(hù)是否已登錄。如果用戶(hù)未登錄，則可以使用 next('/login') 將用戶(hù)重定向到登錄頁(yè)面。

router.beforeEach((to, from, next) => {
  const isLoggedIn = checkUserLoggedIn(); // 檢查用戶(hù)是否已登錄
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login'); // 重定向到登錄頁(yè)面
  } else {
    next(); // 繼續(xù)導(dǎo)航
  }
});

在需要進(jìn)行登錄驗(yàn)證的路由配置中，可以通過(guò) meta 字段指定該路由需要進(jìn)行權(quán)限驗(yàn)證。

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true } // 需要登錄驗(yàn)證
  },
  // 其他路由配置...
];

這樣，在用戶(hù)訪(fǎng)問(wèn) /dashboard 路徑時(shí)，會(huì)先觸發(fā)全局前置守衛(wèi)進(jìn)行登錄驗(yàn)證。如果用戶(hù)未登錄，則會(huì)被重定向到登錄頁(yè)面；如果用戶(hù)已登錄，則會(huì)繼續(xù)導(dǎo)航到目標(biāo)頁(yè)面。

通過(guò)以上方式，我們可以很方便地實(shí)現(xiàn)基于 Vue 路由導(dǎo)航守衛(wèi)的用戶(hù)登錄驗(yàn)證機(jī)制。

3 實(shí)現(xiàn)頁(yè)面訪(fǎng)問(wèn)攔截的步驟

3.1 路由配置

在 Vue 路由中，通過(guò)設(shè)置路由守衛(wèi)規(guī)則來(lái)實(shí)現(xiàn)頁(yè)面訪(fǎng)問(wèn)攔截?？梢栽谛枰獢r截的頁(yè)面配置相應(yīng)的守衛(wèi)。

首先，在項(xiàng)目的路由文件（通常是 router.js）中引入 Vue Router，并創(chuàng)建一個(gè)新的 Router 實(shí)例。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    // 路由配置信息
  ]
})

然后，在路由配置中為需要攔截的頁(yè)面添加守衛(wèi)。

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/dashboard',
      component: Dashboard,
      meta: { requiresAuth: true } // 添加 requiresAuth 元字段表示需要登錄驗(yàn)證
    }
  ]
})

在上面的代碼中，'/dashboard'路徑的組件 Dashboard 需要進(jìn)行登錄驗(yàn)證。

3.2 守衛(wèi)函數(shù)編寫(xiě)

接下來(lái)，編寫(xiě)前置守衛(wèi)函數(shù)，用于實(shí)現(xiàn)登錄驗(yàn)證和權(quán)限校驗(yàn)的邏輯。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login') // 如果需要登錄驗(yàn)證且未登錄，則跳轉(zhuǎn)到登錄頁(yè)面
  } else {
    next() // 否則繼續(xù)導(dǎo)航
  }
})
function isAuthenticated() {
  // 進(jìn)行登錄驗(yàn)證的邏輯，返回 true 表示已登錄，false 表示未登錄
}

在上面的代碼中，beforeEach 函數(shù)是全局前置守衛(wèi)，會(huì)在每次路由切換前執(zhí)行。我們可以在其中進(jìn)行登錄驗(yàn)證的邏輯判斷。

如果 to.meta.requiresAuth 為 true 且用戶(hù)未登錄（isAuthenticated()返回 false），則通過(guò) next('/login')跳轉(zhuǎn)到登錄頁(yè)面。否則，調(diào)用 next()繼續(xù)導(dǎo)航到目標(biāo)頁(yè)面。

3.3 攔截處理

最后，在攔截處理部分，根據(jù)需要攔截的情況，進(jìn)行相應(yīng)的跳轉(zhuǎn)或提示。

在上述代碼中，當(dāng)需要登錄驗(yàn)證且用戶(hù)未登錄時(shí)，會(huì)通過(guò) next('/login')將用戶(hù)重定向到登錄頁(yè)面。

你還可以根據(jù)具體需求進(jìn)行其他攔截處理，比如權(quán)限校驗(yàn)、訪(fǎng)問(wèn)限制等。

這樣，就完成了基本的頁(yè)面訪(fǎng)問(wèn)攔截實(shí)現(xiàn)。

4 示例演示

4.1 創(chuàng)建 Vue 項(xiàng)目

要?jiǎng)?chuàng)建一個(gè)簡(jiǎn)單的 Vue 項(xiàng)目，您可以使用 Vue CLI（命令行界面）來(lái)快速搭建項(xiàng)目結(jié)構(gòu)。以下是使用 Vue CLI 創(chuàng)建 Vue 項(xiàng)目的步驟：

首先，確保您已經(jīng)安裝了 Node.js 和 npm（Node 包管理器）。您可以在終端中運(yùn)行以下命令來(lái)檢查它們是否已安裝：

node -v
npm -v

如果 Node.js 和 npm 未安裝，請(qǐng)前往 Node.js 官網(wǎng)（https://nodejs.org/）下載并安裝。

接下來(lái)，全局安裝 Vue CLI。在終端中運(yùn)行以下命令：

npm install -g @vue/cli

安裝完成后，您可以使用以下命令來(lái)創(chuàng)建一個(gè)新的 Vue 項(xiàng)目：

vue create my-project

在這個(gè)命令中，my-project 是您要?jiǎng)?chuàng)建的項(xiàng)目名稱(chēng)，您可以根據(jù)實(shí)際情況進(jìn)行更改。

運(yùn)行上述命令后，Vue CLI 會(huì)提示您選擇一些配置選項(xiàng)。您可以使用上下箭頭鍵在選項(xiàng)之間進(jìn)行選擇，并使用回車(chē)鍵進(jìn)行確認(rèn)。您可以選擇默認(rèn)配置，或者根據(jù)需要進(jìn)行自定義配置。

完成配置后，Vue CLI 會(huì)自動(dòng)下載和安裝項(xiàng)目所需的依賴(lài)項(xiàng)。

安裝完成后，您可以使用以下命令進(jìn)入項(xiàng)目目錄：

cd my-project

最后，使用以下命令來(lái)啟動(dòng)開(kāi)發(fā)服務(wù)器：

npm run serve

這將啟動(dòng)開(kāi)發(fā)服務(wù)器，并在瀏覽器中打開(kāi)項(xiàng)目。您可以在 http://localhost:8080（默認(rèn)端口）上訪(fǎng)問(wèn)您的 Vue 應(yīng)用程序。

這樣，您就成功創(chuàng)建了一個(gè)簡(jiǎn)單的 Vue 項(xiàng)目。您可以根據(jù)需要在項(xiàng)目中添加組件、路由、狀態(tài)管理等功能，并使用 Vue 的各種特性來(lái)開(kāi)發(fā)您的應(yīng)用程序。

4.2 配置頁(yè)面訪(fǎng)問(wèn)攔截

要在 Vue 項(xiàng)目中添加路由守衛(wèi)并進(jìn)行相應(yīng)的配置，可以按照以下步驟進(jìn)行操作：

創(chuàng)建一個(gè)名為auth.js的新文件，并在其中定義一個(gè)名為AuthGuard的路由守衛(wèi)類(lèi)。

import { getToken } from './auth'; // 導(dǎo)入獲取 token 的方法
const AuthGuard = (to, from, next) => {
  const token = getToken(); // 獲取 token
  if (token) {
    // 如果存在 token，允許訪(fǎng)問(wèn)該頁(yè)面
    next();
  } else {
    // 如果不存在 token，重定向到登錄頁(yè)面
    next('/login');
  }
};
export default AuthGuard;

在router/index.js文件中導(dǎo)入AuthGuard類(lèi)，并將其添加到需要進(jìn)行頁(yè)面訪(fǎng)問(wèn)攔截的路由配置中。

import AuthGuard from '@/auth';
const routes = [
  {
    path: '/dashboard',
    component: DashboardComponent,
    beforeEnter: AuthGuard // 使用 beforeEnter 屬性指定路由守衛(wèi)
  },
  {
    path: '/profile',
    component: ProfileComponent,
    beforeEnter: AuthGuard
  },
  ...
];
const router = new VueRouter({
  routes
});
export default router;

在上述示例中，AuthGuard路由守衛(wèi)將會(huì)攔截對(duì)/dashboard和/profile路徑的訪(fǎng)問(wèn)，只有在存在 token 的情況下才允許訪(fǎng)問(wèn)這些頁(yè)面。如果不存在 token，則會(huì)被重定向到登錄頁(yè)面。

4.3 演示登錄驗(yàn)證

要演示登錄驗(yàn)證并驗(yàn)證訪(fǎng)問(wèn)攔截的效果，可以按照以下步驟進(jìn)行操作：

在auth.js文件中添加一個(gè)名為login的方法，用于模擬用戶(hù)登錄并保存 token。

export const login = (username, password) => {
  // 模擬登錄請(qǐng)求，驗(yàn)證用戶(hù)名和密碼
  if (username === 'admin' && password === 'password') {
    // 登錄成功，保存 token 到 localStorage
    localStorage.setItem('token', 'your_token_here');
    return true;
  } else {
    // 登錄失敗
    return false;
  }
};

在auth.js文件中添加一個(gè)名為getToken的方法，用于獲取保存在 localStorage 中的 token。

export const getToken = () => {
  return localStorage.getItem('token');
};

在登錄頁(yè)面的組件中，使用login方法進(jìn)行用戶(hù)登錄，并根據(jù)登錄結(jié)果進(jìn)行相應(yīng)的處理。

import { login } from '@/auth';
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleLogin() {
      const { username, password } = this;
      const loggedIn = login(username, password);
      if (loggedIn) {
        // 登錄成功，跳轉(zhuǎn)到首頁(yè)或其他需要登錄的頁(yè)面
        this.$router.push('/dashboard');
      } else {
        // 登錄失敗，顯示錯(cuò)誤提示
        alert('登錄失敗，請(qǐng)檢查用戶(hù)名和密碼');
      }
    }
  }
};

在需要進(jìn)行頁(yè)面訪(fǎng)問(wèn)攔截的路由配置中，使用beforeEnter屬性指定路由守衛(wèi)。

import AuthGuard from '@/auth';
const routes = [
  {
    path: '/dashboard',
    component: DashboardComponent,
    beforeEnter: AuthGuard
  },
  {
    path: '/profile',
    component: ProfileComponent,
    beforeEnter: AuthGuard
  },
  ...
];

在上述示例中，login方法模擬用戶(hù)登錄，并將 token 保存在 localStorage 中。在登錄頁(yè)面的組件中，調(diào)用login方法進(jìn)行登錄，并根據(jù)登錄結(jié)果進(jìn)行相應(yīng)的處理。在需要進(jìn)行頁(yè)面訪(fǎng)問(wèn)攔截的路由配置中，使用beforeEnter屬性指定路由守衛(wèi)。

5 總結(jié)

在這篇技術(shù)博客中，我們學(xué)習(xí)了如何使用 Vue 實(shí)現(xiàn)頁(yè)面訪(fǎng)問(wèn)攔截。頁(yè)面訪(fǎng)問(wèn)攔截是一種常見(jiàn)的安全措施，可以確保只有經(jīng)過(guò)身份驗(yàn)證的用戶(hù)才能訪(fǎng)問(wèn)特定頁(yè)面或執(zhí)行特定操作。

通過(guò) Vue 的導(dǎo)航守衛(wèi)功能，我們可以在路由切換之前進(jìn)行攔截，并根據(jù)需要進(jìn)行身份驗(yàn)證或權(quán)限檢查。通過(guò)使用 beforeEach 導(dǎo)航守衛(wèi)，我們可以在每次路由切換之前執(zhí)行自定義邏輯。

在這篇博客中，我們演示了如何創(chuàng)建一個(gè)簡(jiǎn)單的登錄頁(yè)面，并使用導(dǎo)航守衛(wèi)來(lái)阻止未經(jīng)身份驗(yàn)證的用戶(hù)訪(fǎng)問(wèn)受保護(hù)的頁(yè)面。我們還介紹了如何使用 Vue 的路由功能來(lái)設(shè)置路由和導(dǎo)航守衛(wèi)。

通過(guò)這個(gè)示例，我們可以看到 Vue 的靈活性和強(qiáng)大性，使我們能夠輕松地實(shí)現(xiàn)頁(yè)面訪(fǎng)問(wèn)攔截功能。這對(duì)于構(gòu)建安全的 Web 應(yīng)用程序至關(guān)重要。

到此這篇關(guān)于詳解如何使用vue實(shí)現(xiàn)頁(yè)面訪(fǎng)問(wèn)攔截的文章就介紹到這了,更多相關(guān)vue頁(yè)面訪(fǎng)問(wèn)攔截內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論