使用 Vue 实现页面访问拦截-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用 Vue 实现页面访问拦截。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1 Vue 路由与导航守卫
- 1.1 Vue 路由简介
- 1.2 导航守卫概述
2 实现访问拦截的核心概念
- 2.1 路由守卫介绍
  - 2.1.1 前置守卫（beforeEach）
  - 2.1.2 后置钩子（afterEach）
  - 2.1.3 解析守卫（beforeResolve）
- 2.2 鉴权逻辑设计
- 2.3 登录验证机制
3 实现页面访问拦截的步骤
- 3.1 路由配置
- 3.2 守卫函数编写
- 3.3 拦截处理
4 示例演示
- 4.1 创建 Vue 项目
- 4.2 配置页面访问拦截
- 4.3 演示登录验证
5 总结

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;

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

4.3 演示登录验证

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

在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;
  }
};

在auth.js文件中添加一个名为getToken的方法，用于获取保存在 localStorage 中的 token。

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
  },
  ...
];

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