用户权限控制：巧用 Vue 巧妙实现页面按钮级控制

前端

2023-12-17 08:16:59

巧用 Vue，实现按钮权限控制，权限分工，井井有条！

在现代 Web 应用中，权限控制是至关重要的。它可以确保用户只能访问他们有权访问的资源。在 Vue 项目中，我们可以使用多种方法来实现权限控制。其中，按钮权限控制是一个重要的方面。

按钮权限控制是指控制用户对页面上按钮的访问权限。例如，我们可以限制用户只能点击某些按钮，而不能点击其他按钮。这样可以防止用户执行他们无权执行的操作。

在本文中，我们将探讨如何在 Vue 项目中实现细粒度的按钮权限控制。我们将重点介绍以下四种方法：

利用字典表配置按钮权限
通过菜单控制按钮
根据角色动态控制菜单和按钮
基于路由对比当前页面按钮 KEY 实现控制

一、字典表配置按钮权限：简单易用，一目了然

在字典表中配置按钮权限是一种简单易用的方法。我们可以创建一个字典表，其中包含所有按钮的名称和权限。当用户请求一个页面时，我们可以根据用户的权限来决定哪些按钮应该显示。

// 字典表配置按钮权限示例
const buttonPermissions = {
  "create-user": ["admin"],
  "edit-user": ["admin", "manager"],
  "delete-user": ["admin"]
};

在上面的例子中，我们创建了一个名为 buttonPermissions 的字典表。这个字典表包含三个键值对。每个键值对包含一个按钮的名称和一个数组，数组中包含具有该按钮权限的角色。

当用户请求一个页面时，我们可以根据用户的角色来决定哪些按钮应该显示。例如，如果一个用户是管理员，那么他就可以看到所有按钮。而如果一个用户是经理，那么他只能看到 create-user 和 edit-user 这两个按钮。

二、菜单控制按钮：层层递进，权限分明

通过菜单控制按钮也是一种实现按钮权限控制的方法。我们可以创建一个菜单，其中包含所有按钮。当用户点击一个菜单项时，我们可以根据用户的权限来决定哪些按钮应该显示。

// 菜单控制按钮示例
const menuItems = [
  {
    name: "用户管理",
    children: [
      {
        name: "创建用户",
        permission: "create-user"
      },
      {
        name: "编辑用户",
        permission: "edit-user"
      },
      {
        name: "删除用户",
        permission: "delete-user"
      }
    ]
  },
  {
    name: "订单管理",
    children: [
      {
        name: "创建订单",
        permission: "create-order"
      },
      {
        name: "编辑订单",
        permission: "edit-order"
      },
      {
        name: "删除订单",
        permission: "delete-order"
      }
    ]
  }
];

在上面的例子中，我们创建了一个名为 menuItems 的菜单。这个菜单包含两个菜单项，分别是 "用户管理" 和 "订单管理"。每个菜单项包含多个子菜单项。每个子菜单项都有一个名称和一个权限。

当用户点击一个菜单项时，我们可以根据用户的权限来决定哪些子菜单项应该显示。例如，如果一个用户是管理员，那么他就可以看到所有子菜单项。而如果一个用户是经理，那么他只能看到 "创建用户" 和 "编辑用户" 这两个子菜单项。

三、角色控制菜单和按钮：权限分配，井井有条

根据角色动态控制菜单和按钮也是一种实现按钮权限控制的方法。我们可以根据用户的角色来动态地生成菜单和按钮。

// 根据角色动态控制菜单和按钮示例
const userRoles = {
  "admin": ["create-user", "edit-user", "delete-user"],
  "manager": ["create-user", "edit-user"],
  "user": []
};

const generateMenu = (user) => {
  const menuItems = [];
  for (const role of userRoles[user]) {
    menuItems.push({
      name: role,
      permission: role
    });
  }

  return menuItems;
};

在上面的例子中，我们创建了一个名为 userRoles 的对象。这个对象包含三个键值对。每个键值对包含一个角色和一个数组，数组中包含该角色拥有的权限。

我们还创建了一个名为 generateMenu 的函数。这个函数接受一个用户作为参数，并返回一个菜单。菜单中的菜单项是根据用户的角色动态生成的。

当用户请求一个页面时，我们可以根据用户的角色来调用 generateMenu 函数来生成菜单。然后，我们可以根据菜单来决定哪些按钮应该显示。

四、路由对比当前页面按钮 KEY 实现控制：灵活配置，权限精细

基于路由对比当前页面按钮 KEY 实现控制是一种灵活的实现按钮权限控制的方法。我们可以使用路由来确定当前页面，然后根据当前页面来决定哪些按钮应该显示。

// 基于路由对比当前页面按钮 KEY 实现控制示例
const buttonPermissions = {
  "/user-management": ["create-user", "edit-user", "delete-user"],
  "/order-management": ["create-order", "edit-order", "delete-order"]
};

const getCurrentPage = () => {
  return window.location.pathname;
};

const getButtonPermissions = () => {
  const currentPage = getCurrentPage();
  return buttonPermissions[currentPage];
};