使用 Vue 实现页面访问拦截

尘缘2023-08-09 17:54

在现代的 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）是基于权限的访问控制系统的核心概念。在设计鉴权逻辑时，通常需要考虑以下几个方面：

  1. 角色与权限的定义：确定系统中的角色和对应的权限，并将其进行清晰的定义和划分。

  2. 用户认证：实现用户登录验证机制，确保只有经过认证的用户才能访问受限资源。

  3. 路由权限控制：根据用户的角色和权限，在路由导航守卫中进行权限验证，决定是否允许用户访问某个页面或执行某个操作。

  4. 组件级别的权限控制：在组件内部根据用户的角色和权限，动态展示或隐藏特定功能模块或按钮。

  5. 后端接口权限控制：在后端接口层面进行权限验证，防止未经授权的请求访问敏感数据或执行重要操作。

通过合理设计和实现鉴权逻辑，可以有效地保护系统的安全性和数据的完整性。

2.3 登录验证机制

利用 Vue 路由导航守卫可以很方便地实现用户登录验证机制。

首先，在全局前置守卫（beforeEach）中检查用户是否已登录。如果用户未登录，则可以使用 next('/login') 将用户重定向到登录页面。

javascript 复制代码 
router.beforeEach((to, from, next) => {
  const isLoggedIn = checkUserLoggedIn(); // 检查用户是否已登录
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login'); // 重定向到登录页面
  } else {
    next(); // 继续导航
  }
});

在需要进行登录验证的路由配置中，可以通过 meta 字段指定该路由需要进行权限验证。

javascript 复制代码 
const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true } // 需要登录验证
  },
  // 其他路由配置...
];

这样，在用户访问 /dashboard 路径时，会先触发全局前置守卫进行登录验证。如果用户未登录，则会被重定向到登录页面；如果用户已登录，则会继续导航到目标页面。

通过以上方式，我们可以很方便地实现基于 Vue 路由导航守卫的用户登录验证机制。

3 实现页面访问拦截的步骤

3.1 路由配置

在 Vue 路由中，通过设置路由守卫规则来实现页面访问拦截。可以在需要拦截的页面配置相应的守卫。

首先，在项目的路由文件（通常是 router.js）中引入 Vue Router，并创建一个新的 Router 实例。

javascript 复制代码 
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

然后，在路由配置中为需要拦截的页面添加守卫。

javascript 复制代码 
const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/dashboard',
      component: Dashboard,
      meta: { requiresAuth: true } // 添加 requiresAuth 元字段表示需要登录验证
    }
  ]
})

在上面的代码中，'/dashboard'路径的组件 Dashboard 需要进行登录验证。

3.2 守卫函数编写

接下来，编写前置守卫函数，用于实现登录验证和权限校验的逻辑。

javascript 复制代码 
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 项目的步骤：

  1. 首先，确保您已经安装了 Node.js 和 npm（Node 包管理器）。您可以在终端中运行以下命令来检查它们是否已安装：

    cmd 复制代码 
    node -v
npm -v

  2. 如果 Node.js 和 npm 未安装，请前往 Node.js 官网（nodejs.org/）下载并安装。

  3. 接下来，全局安装 Vue CLI。在终端中运行以下命令：

    cmd 复制代码 
    npm install -g @vue/cli

  4. 安装完成后，您可以使用以下命令来创建一个新的 Vue 项目：

    cmd 复制代码 
    vue create my-project

    在这个命令中，my-project 是您要创建的项目名称，您可以根据实际情况进行更改。

  5. 运行上述命令后，Vue CLI 会提示您选择一些配置选项。您可以使用上下箭头键在选项之间进行选择，并使用回车键进行确认。您可以选择默认配置，或者根据需要进行自定义配置。

  6. 完成配置后，Vue CLI 会自动下载和安装项目所需的依赖项。

  7. 安装完成后，您可以使用以下命令进入项目目录：

    cmd 复制代码 
    cd my-project

  8. 最后，使用以下命令来启动开发服务器：

    cmd 复制代码 
    npm run serve

    这将启动开发服务器，并在浏览器中打开项目。您可以在 http://localhost:8080（默认端口）上访问您的 Vue 应用程序。

这样，您就成功创建了一个简单的 Vue 项目。您可以根据需要在项目中添加组件、路由、状态管理等功能，并使用 Vue 的各种特性来开发您的应用程序。

4.2 配置页面访问拦截

要在 Vue 项目中添加路由守卫并进行相应的配置，可以按照以下步骤进行操作：

  1. 创建一个名为auth.js的新文件，并在其中定义一个名为AuthGuard的路由守卫类。
javascript 复制代码 
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;
  1. 在router/index.js文件中导入AuthGuard类，并将其添加到需要进行页面访问拦截的路由配置中。
javascript 复制代码 
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;

在上述示例中，AuthGuard路由守卫将会拦截对/dashboard和/profile路径的访问，只有在存在 token 的情况下才允许访问这些页面。如果不存在 token，则会被重定向到登录页面。

4.3 演示登录验证

要演示登录验证并验证访问拦截的效果，可以按照以下步骤进行操作：

  1. 在auth.js文件中添加一个名为login的方法，用于模拟用户登录并保存 token。
javascript 复制代码 
export const login = (username, password) => {
  // 模拟登录请求，验证用户名和密码
  if (username === 'admin' && password === 'password') {
    // 登录成功，保存 token 到 localStorage
    localStorage.setItem('token', 'your_token_here');
    return true;
  } else {
    // 登录失败
    return false;
  }
};
  1. 在auth.js文件中添加一个名为getToken的方法，用于获取保存在 localStorage 中的 token。
javascript 复制代码 
export const getToken = () => {
  return localStorage.getItem('token');
};
  1. 在登录页面的组件中，使用login方法进行用户登录，并根据登录结果进行相应的处理。
javascript 复制代码 
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('登录失败，请检查用户名和密码');
      }
    }
  }
};
  1. 在需要进行页面访问拦截的路由配置中，使用beforeEnter属性指定路由守卫。
javascript 复制代码 
import AuthGuard from '@/auth';

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

在上述示例中，login方法模拟用户登录，并将 token 保存在 localStorage 中。在登录页面的组件中，调用login方法进行登录，并根据登录结果进行相应的处理。在需要进行页面访问拦截的路由配置中，使用beforeEnter属性指定路由守卫。

5 总结

在这篇技术博客中，我们学习了如何使用 Vue 实现页面访问拦截。页面访问拦截是一种常见的安全措施，可以确保只有经过身份验证的用户才能访问特定页面或执行特定操作。

通过 Vue 的导航守卫功能，我们可以在路由切换之前进行拦截，并根据需要进行身份验证或权限检查。通过使用 beforeEach 导航守卫，我们可以在每次路由切换之前执行自定义逻辑。

在这篇博客中，我们演示了如何创建一个简单的登录页面，并使用导航守卫来阻止未经身份验证的用户访问受保护的页面。我们还介绍了如何使用 Vue 的路由功能来设置路由和导航守卫。

通过这个示例，我们可以看到 Vue 的灵活性和强大性，使我们能够轻松地实现页面访问拦截功能。这对于构建安全的 Web 应用程序至关重要。

希望这篇博客对您有所帮助，并为您提供了使用 Vue 实现页面访问拦截的基础知识。如果您对此感兴趣，可以进一步探索 Vue 的其他功能和扩展，以提升您的开发技能和构建更安全的应用程序。

相关推荐
请叫我欧皇i5 分钟前
html本地离线引入vant和vue2（详细步骤）
开发语言·前端·javascript
533_7 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun13 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan44 分钟前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端：HTML （学习笔记）【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
计算机毕设指导61 小时前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
Json_181790144802 小时前
电商拍立淘按图搜索API接口系列，文档说明参考
前端·数据库
风尚云网2 小时前
风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作