使用 Vue 實現頁面訪問攔截

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

1 Vue 路由與導航守衛

1.1 Vue 路由簡介

Vue 路由是用於構建單頁應用程序（SPA）的官方路由庫。它允許開發者根據不同的 URL 地址，將頁面切換到對應的組件上，實現頁面之間的無刷新跳轉。

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

Vue 路由提供了多種導航方式，包括普通的鏈接跳轉、編程式導航以及通過瀏覽器前進和後退按鈕進行導航等。

1.2 導航守衛概述

導航守衛是 Vue 路由提供的一種功能，用於在路由切換過程中進行控制和管理。它可以讓開發者在路由切換前、切換後或者切換取消時執行一些特定的邏輯操作。

導航守衛主要有以下幾個鉤子函數：

beforeEach: 在每次路由切換前被調用，可以用來進行全局的權限驗證或其他前置操作。
afterEach: 在每次路由切換後被調用，可以用來進行統計或其他後置操作。
beforeResolve: 在每次路由切換前被調用，與類似，但在全局調用之前被調用。beforeEach``afterEach
beforeEnter: 在單個路由配置中定義的鉤子函數，在進入該路由前被調用。

此外，還有兩種特殊的導航守衛：

beforeRouteUpdate: 在當前路由複用時調用，比如從導航到。/user/1``/user/2
beforeRouteLeave: 在離開當前路由前調用，可以用來提示用戶保存未保存的數據。

通過使用導航守衛，我們可以實現諸如登錄驗證、權限控制、頁面跳轉攔截等功能。

2 實現訪問攔截的核心概念

2.1 路由守衛介紹

2.1.1 前置守衛（`beforeEach`）

前置守衛是在路由切換前被調用的鉤子函數。可以通過註冊全局前置守衛或者在單個路由配置中定義的鉤子來實現。beforeEnter

使用前置守衛可以進行一些全局的權限驗證或其他前置操作，例如檢查用戶是否登錄、校驗用戶權限等。如果需要阻止當前導航，則可以調用。next(false)

2.1.2 後置鉤子（`afterEach`）

後置鉤子是在路由切換後被調用的鉤子函數。它沒有能力改變導航本身，只能做一些統計或其他後置操作。

後置鉤子不接收函數參數，因爲無法改變導航。next

2.1.3 解析守衛（`beforeResolve`）

解析守衛是在路由組件準備就緒之前被調用的鉤子函數。它類似於全局前置守衛，但在全局調用之前被調用。afterEach

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

2.2 鑑權邏輯設計

鑑權（Authorization）是基於權限的訪問控制系統的核心概念。在設計鑑權邏輯時，通常需要考慮以下幾個方面：

角色與權限的定義：確定系統中的角色和對應的權限，並將其進行清晰的定義和劃分。
用戶認證：實現用戶登錄驗證機制，確保只有經過認證的用戶才能訪問受限資源。
路由權限控制：根據用戶的角色和權限，在路由導航守衛中進行權限驗證，決定是否允許用戶訪問某個頁面或執行某個操作。
組件級別的權限控制：在組件內部根據用戶的角色和權限，動態展示或隱藏特定功能模塊或按鈕。
後端接口權限控制：在後端接口層面進行權限驗證，防止未經授權的請求訪問敏感數據或執行重要操作。

通過合理設計和實現鑑權邏輯，可以有效地保護系統的安全性和數據的完整性。

2.3 登錄驗證機制

利用 Vue 路由導航守衛可以很方便地實現用戶登錄驗證機制。

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

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

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

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

這樣，在用戶訪問路徑時，會先觸發全局前置守衛進行登錄驗證。如果用戶未登錄，則會被重定向到登錄頁面；如果用戶已登錄，則會繼續導航到目標頁面。/dashboard

通過以上方式，我們可以很方便地實現基於 Vue 路由導航守衛的用戶登錄驗證機制。

3 實現頁面訪問攔截的步驟

3.1 路由配置

在 Vue 路由中，通過設置路由守衛規則來實現頁面訪問攔截。可以在需要攔截的頁面配置相應的守衛。

首先，在項目的路由文件（通常是 router.js）中引入 Vue Router，並創建一個新的 Router 實例。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 路由配置信息
  ]
})

然後，在路由配置中爲需要攔截的頁面添加守衛。

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

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

3.2 守衛函數編寫

接下來，編寫前置守衛函數，用於實現登錄驗證和權限校驗的邏輯。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login') // 如果需要登錄驗證且未登錄，則跳轉到登錄頁面
  } else {
    next() // 否則繼續導航
  }
})

function isAuthenticated() {
  // 進行登錄驗證的邏輯，返回 true 表示已登錄，false 表示未登錄
}

在上面的代碼中，beforeEach 函數是全局前置守衛，會在每次路由切換前執行。我們可以在其中進行登錄驗證的邏輯判斷。

如果 to.meta.requiresAuth 爲 true 且用戶未登錄（isAuthenticated() 返回 false），則通過 next('/login') 跳轉到登錄頁面。否則，調用 next() 繼續導航到目標頁面。

3.3 攔截處理

最後，在攔截處理部分，根據需要攔截的情況，進行相應的跳轉或提示。

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

你還可以根據具體需求進行其他攔截處理，比如權限校驗、訪問限制等。

這樣，就完成了基本的頁面訪問攔截實現。

4 示例演示

4.1 創建 Vue 項目

要創建一個簡單的 Vue 項目，您可以使用 Vue CLI（命令行界面）來快速搭建項目結構。以下是使用 Vue CLI 創建 Vue 項目的步驟：

首先，確保您已經安裝了 Node.js 和 npm（Node 包管理器）。您可以在終端中運行以下命令來檢查它們是否已安裝：
```
node -v
npm -v
```
如果 Node.js 和 npm 未安裝，請前往 Node.js 官網（https://nodejs.org/）下載並安裝。
接下來，全局安裝 Vue CLI。在終端中運行以下命令：
```
npm install -g @vue/cli
```
安裝完成後，您可以使用以下命令來創建一個新的 Vue 項目：
```
vue create my-project
```
在這個命令中，my-project 是您要創建的項目名稱，您可以根據實際情況進行更改。
運行上述命令後，Vue CLI 會提示您選擇一些配置選項。您可以使用上下箭頭鍵在選項之間進行選擇，並使用回車鍵進行確認。您可以選擇默認配置，或者根據需要進行自定義配置。
完成配置後，Vue CLI 會自動下載和安裝項目所需的依賴項。
安裝完成後，您可以使用以下命令進入項目目錄：
```
cd my-project
```
最後，使用以下命令來啓動開發服務器：
```
npm run serve
```
這將啓動開發服務器，並在瀏覽器中打開項目。您可以在 http://localhost:8080（默認端口）上訪問您的 Vue 應用程序。

這樣，您就成功創建了一個簡單的 Vue 項目。您可以根據需要在項目中添加組件、路由、狀態管理等功能，並使用 Vue 的各種特性來開發您的應用程序。

4.2 配置頁面訪問攔截

要在 Vue 項目中添加路由守衛並進行相應的配置，可以按照以下步驟進行操作：

創建一個名爲的新文件，並在其中定義一個名爲的路由守衛類。auth.js``AuthGuard

import { getToken } from './auth'; // 導入獲取 token 的方法

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

export default AuthGuard;

在文件中導入類，並將其添加到需要進行頁面訪問攔截的路由配置中。router/index.js``AuthGuard

import AuthGuard from '@/auth';

const routes = [
  {
    path: '/dashboard',
    component: DashboardComponent,
    beforeEnter: AuthGuard // 使用 beforeEnter 屬性指定路由守衛
  },
  {
    path: '/profile',
    component: ProfileComponent,
    beforeEnter: AuthGuard
  },
  ...
];

const router = new VueRouter({
  routes
});

export default router;

在上述示例中，路由守衛將會攔截對和路徑的訪問，只有在存在 token 的情況下才允許訪問這些頁面。如果不存在 token，則會被重定向到登錄頁面。AuthGuard``/dashboard``/profile

4.3 演示登錄驗證

要演示登錄驗證並驗證訪問攔截的效果，可以按照以下步驟進行操作：

在文件中添加一個名爲的方法，用於模擬用戶登錄並保存 token。auth.js``login

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

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

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

在登錄頁面的組件中，使用方法進行用戶登錄，並根據登錄結果進行相應的處理。login

import { login } from '@/auth';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleLogin() {
      const { username, password } = this;
      const loggedIn = login(username, password);
      if (loggedIn) {
        // 登錄成功，跳轉到首頁或其他需要登錄的頁面
        this.$router.push('/dashboard');
      } else {
        // 登錄失敗，顯示錯誤提示
        alert('登錄失敗，請檢查用戶名和密碼');
      }
    }
  }
};

在需要進行頁面訪問攔截的路由配置中，使用屬性指定路由守衛。beforeEnter

import AuthGuard from '@/auth';

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

在上述示例中，方法模擬用戶登錄，並將 token 保存在 localStorage 中。在登錄頁面的組件中，調用方法進行登錄，並根據登錄結果進行相應的處理。在需要進行頁面訪問攔截的路由配置中，使用屬性指定路由守衛。login``login``beforeEnter

5 總結

在這篇技術博客中，我們學習瞭如何使用 Vue 實現頁面訪問攔截。頁面訪問攔截是一種常見的安全措施，可以確保只有經過身份驗證的用戶才能訪問特定頁面或執行特定操作。

通過 Vue 的導航守衛功能，我們可以在路由切換之前進行攔截，並根據需要進行身份驗證或權限檢查。通過使用 beforeEach 導航守衛，我們可以在每次路由切換之前執行自定義邏輯。

在這篇博客中，我們演示瞭如何創建一個簡單的登錄頁面，並使用導航守衛來阻止未經身份驗證的用戶訪問受保護的頁面。我們還介紹瞭如何使用 Vue 的路由功能來設置路由和導航守衛。

通過這個示例，我們可以看到 Vue 的靈活性和強大性，使我們能夠輕鬆地實現頁面訪問攔截功能。這對於構建安全的 Web 應用程序至關重要。

希望這篇博客對您有所幫助，併爲您提供了使用 Vue 實現頁面訪問攔截的基礎知識。如果您對此感興趣，可以進一步探索 Vue 的其他功能和擴展，以提升您的開發技能和構建更安全的應用程序。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/19HjjVzmLOpVlxCXcbiCXQ