使用 Vue 實(shí)現(xiàn)頁面訪問攔截

在現(xiàn)代的 Web 應(yīng)用程序中，頁面訪問攔截是非常重要的一個方面。它可以用于確保用戶只能訪問他們有權(quán)限的頁面，提高應(yīng)用程序的安全性和用戶體驗。本篇博文將介紹如何使用 Vue 框架來實(shí)現(xiàn)頁面訪問攔截的功能。

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

1.1 Vue 路由簡介

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

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

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

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

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

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

• beforeEach: 在每次路由切換前被調(diào)用，可以用來進(jìn)行全局的權(quán)限驗證或其他前置操作。

• afterEach: 在每次路由切換后被調(diào)用，可以用來進(jìn)行統(tǒng)計或其他后置操作。

• beforeResolve: 在每次路由切換前被調(diào)用，與beforeEach類似，但在全局 afterEach 調(diào)用之前被調(diào)用。

• beforeEnter: 在單個路由配置中定義的鉤子函數(shù)，在進(jìn)入該路由前被調(diào)用。

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

• beforeRouteUpdate: 在當(dāng)前路由復(fù)用時調(diào)用，比如從 /user/1 導(dǎo)航到 /user/2。

• beforeRouteLeave: 在離開當(dāng)前路由前調(diào)用，可以用來提示用戶保存未保存的數(shù)據(jù)。

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

2 實(shí)現(xiàn)訪問攔截的核心概念

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

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

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

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

2.1.2 后置鉤子（afterEach）

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

后置鉤子不接收 next 函數(shù)參數(shù)，因為無法改變導(dǎo)航。

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

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

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

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

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

1. 角色與權(quán)限的定義：確定系統(tǒng)中的角色和對應(yīng)的權(quán)限，并將其進(jìn)行清晰的定義和劃分。

2. 用戶認(rèn)證：實(shí)現(xiàn)用戶登錄驗證機(jī)制，確保只有經(jīng)過認(rèn)證的用戶才能訪問受限資源。

3. 路由權(quán)限控制：根據(jù)用戶的角色和權(quán)限，在路由導(dǎo)航守衛(wèi)中進(jìn)行權(quán)限驗證，決定是否允許用戶訪問某個頁面或執(zhí)行某個操作。

4. 組件級別的權(quán)限控制：在組件內(nèi)部根據(jù)用戶的角色和權(quán)限，動態(tài)展示或隱藏特定功能模塊或按鈕。

5. 后端接口權(quán)限控制：在后端接口層面進(jìn)行權(quán)限驗證，防止未經(jīng)授權(quán)的請求訪問敏感數(shù)據(jù)或執(zhí)行重要操作。

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

2.3 登錄驗證機(jī)制

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

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

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

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

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

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

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

3 實(shí)現(xiàn)頁面訪問攔截的步驟

3.1 路由配置

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

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

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

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

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

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

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

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

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

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

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

3.3 攔截處理

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

在上述代碼中，當(dāng)需要登錄驗證且用戶未登錄時，會通過 next('/login')將用戶重定向到登錄頁面。

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

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

4 示例演示

4.1 創(chuàng)建 Vue 項目

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

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

   ?node -v
   ?npm -v

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

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

   ?npm install -g @vue/cli

4. 安裝完成后，您可以使用以下命令來創(chuàng)建一個新的 Vue 項目：

   ?vue create my-project

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

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

6. 完成配置后，Vue CLI 會自動下載和安裝項目所需的依賴項。

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

   cd my-project

8. 最后，使用以下命令來啟動開發(fā)服務(wù)器：

   npm run serve

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

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

4.2 配置頁面訪問攔截

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

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

import { getToken } from './auth'; // 導(dǎo)入獲取 token 的方法

const AuthGuard = (to, from, next) => {
?const token = getToken(); // 獲取 token
?if (token) {
? ?// 如果存在 token，允許訪問該頁面
? ?next();
?} else {
? ?// 如果不存在 token，重定向到登錄頁面
? ?next('/login');
?}
};

export default AuthGuard;

2. 在router/index.js文件中導(dǎo)入AuthGuard類，并將其添加到需要進(jì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)將會攔截對/dashboard和/profile路徑的訪問，只有在存在 token 的情況下才允許訪問這些頁面。如果不存在 token，則會被重定向到登錄頁面。

4.3 演示登錄驗證

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

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

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

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

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

3. 在登錄頁面的組件中，使用login方法進(jìn)行用戶登錄，并根據(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)到首頁或其他需要登錄的頁面
? ? ? ?this.$router.push('/dashboard');
? ? ?} else {
? ? ? ?// 登錄失敗，顯示錯誤提示
? ? ? ?alert('登錄失敗，請檢查用戶名和密碼');
? ? ?}
? ?}
?}
};

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

import AuthGuard from '@/auth';

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

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

5 總結(jié)

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

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

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

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

希望這篇博客對您有所幫助，并為您提供了使用 Vue 實(shí)現(xiàn)頁面訪問攔截的基礎(chǔ)知識。如果您對此感興趣，可以進(jìn)一步探索 Vue 的其他功能和擴(kuò)展，以提升您的開發(fā)技能和構(gòu)建更安全的應(yīng)用程序。