ElementUI 电商项目实践（二）：掌握路由导航守卫，打造细致访问权限控制

2023-10-19 13:23:05

前言

在 ElementUI 电商项目实践系列文章的第一篇中，我们搭建了项目的基本框架，并实现了基本的 CRUD 操作。在本文中，我们将重点介绍如何利用路由导航守卫来实现精细的访问权限控制。我们将深入探讨如何通过路由守卫来拦截和处理路由导航，以及如何根据用户登录状态和访问权限来控制页面访问。这将帮助您构建更安全、更健壮的前端应用程序。

路由导航守卫

路由导航守卫是 Vue.js 路由系统提供的一个强大功能，它允许您在路由发生变化时拦截和处理路由导航。这意味着您可以在用户访问某个页面之前对路由进行检查和处理，从而实现各种业务逻辑，例如访问权限控制、登录验证、数据预加载等。

路由导航守卫的实现非常简单，您只需要在路由对象中添加一个 beforeEach 导航守卫，并传入一个回调函数。该回调函数接受三个参数：

to：即将要访问的路由对象
from：当前正在访问的路由对象
next：一个函数，用于继续或终止路由导航

您可以在 beforeEach 导航守卫中对 to 路由对象进行检查，判断用户是否具有访问该页面的权限。如果用户没有权限，则您可以调用 next(false) 来终止路由导航，并将其重定向到登录页面或其他合适的页面。

实现访问权限控制

在我们的 ElementUI 电商项目中，我们将使用路由导航守卫来实现访问权限控制。首先，我们需要定义一个 permission 变量来存储用户的访问权限，该变量可以从后端获取。然后，我们在 beforeEach 导航守卫中对 to 路由对象进行检查，判断用户是否具有访问该页面的权限。如果用户没有权限，则我们将将其重定向到登录页面。

// 定义权限变量
const permission = {
  // ...
};

// 添加路由导航守卫
router.beforeEach((to, from, next) => {
  // 检查用户是否有访问权限
  if (!permission[to.name]) {
    // 没有权限，重定向到登录页面
    next({ path: '/login' });
  } else {
    // 有权限，继续路由导航
    next();
  }
});