快捷導(dǎo)航

詳解如何使用vue實(shí)現(xiàn)頁面訪問攔截

更新時(shí)間：2023年08月09日 10:43:40 作者：塵緣如夢！

這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)頁面訪問攔截功能，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以了解一下

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ī)則，每個(gè)路由規(guī)則都映射一個(gè) URL 地址和對應(yīng)的組件。當(dāng)用戶訪問某個(gè) URL 地址時(shí)，路由會根據(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ā)者在路由切換前、切換后或者切換取消時(shí)執(zhí)行一些特定的邏輯操作。

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

beforeEach: 在每次路由切換前被調(diào)用，可以用來進(jìn)行全局的權(quán)限驗(yàn)證或其他前置操作。
afterEach: 在每次路由切換后被調(diào)用，可以用來進(jìn)行統(tǒng)計(jì)或其他后置操作。
beforeResolve: 在每次路由切換前被調(diào)用，與beforeEach類似，但在全局 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: 在離開當(dāng)前路由前調(diào)用，可以用來提示用戶保存未保存的數(shù)據(jù)。

通過使用導(dǎo)航守衛(wèi)，我們可以實(shí)現(xiàn)諸如登錄驗(yà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)或者在單個(gè)路由配置中定義的 beforeEnter 鉤子來實(shí)現(xiàn)。

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

2.1.2 后置鉤子（afterEach）

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

后置鉤子不接收 next 函數(shù)參數(shù)，因?yàn)闊o法改變導(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è)計(jì)

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

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

通過合理設(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)用戶登錄驗(yà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)行登錄驗(yàn)證的路由配置中，可以通過 meta 字段指定該路由需要進(jìn)行權(quán)限驗(yàn)證。

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

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

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

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

3.1 路由配置

在 Vue 路由中，通過設(shè)置路由守衛(wèi)規(guī)則來實(shí)現(xiàn)頁面訪問攔截?？梢栽谛枰獢r截的頁面配置相應(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: [
    // 路由配置信息
  ]
})

然后，在路由配置中為需要攔截的頁面添加守衛(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ù)編寫

接下來，編寫前置守衛(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)到登錄頁面
  } else {
    next() // 否則繼續(xù)導(dǎo)航
  }
})
function isAuthenticated() {
  // 進(jìn)行登錄驗(yàn)證的邏輯，返回 true 表示已登錄，false 表示未登錄
}

在上面的代碼中，beforeEach 函數(shù)是全局前置守衛(wèi)，會在每次路由切換前執(zhí)行。我們可以在其中進(jìn)行登錄驗(yà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)需要登錄驗(yàn)證且用戶未登錄時(shí)，會通過 next('/login')將用戶重定向到登錄頁面。

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

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

4 示例演示

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

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

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

node -v
npm -v

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

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

npm install -g @vue/cli

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

vue create my-project

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

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

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

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

cd my-project

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

npm run serve

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

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

4.2 配置頁面訪問攔截

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

創(chuàng)建一個(gè)名為auth.js的新文件，并在其中定義一個(gè)名為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;

在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 演示登錄驗(yàn)證

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

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

export const login = (username, password) => {
  // 模擬登錄請求，驗(yàn)證用戶名和密碼
  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');
};

在登錄頁面的組件中，使用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 {
        // 登錄失敗，顯示錯(cuò)誤提示
        alert('登錄失敗，請檢查用戶名和密碼');
      }
    }
  }
};

在需要進(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)。