Element UI + Vue 2《大事件》项目构建：控制后台访问权限

2023-11-17 23:47:05

管理后台访问控制权的艺术 - ElementUI + Vue2《大事件》项目实践

在实际的项目开发中，后台访问控制权是十分重要的。它能够保障后台管理系统的安全性，防止未经授权的用户访问敏感数据或执行危险的操作。在这篇文章中，我们将以 Element UI + Vue 2 的《大事件》项目为基础，探讨如何在其中实现后台访问权限控制。

构建权限模型

为了管理后台访问权限，我们需要构建一个权限模型。这个模型可以基于用户角色、资源类型、操作类型等因素来定义。在我们的《大事件》项目中，我们将使用 Vuex 来构建一个简单的权限模型。

在 Vuex 的 store 中，我们可以定义一个权限模块，其中包含以下属性：

roles： 表示用户角色，例如 "admin", "editor", "user" 等。
resources： 表示资源类型，例如 "article", "user", "role" 等。
actions： 表示操作类型，例如 "create", "update", "delete" 等。
permissions： 表示权限映射，将角色、资源和操作类型映射到权限值。

const state = {
  roles: ["admin", "editor", "user"],
  resources: ["article", "user", "role"],
  actions: ["create", "update", "delete"],
  permissions: {
    admin: {
      article: {
        create: true,
        update: true,
        delete: true
      },
      user: {
        create: true,
        update: true,
        delete: true
      },
      role: {
        create: true,
        update: true,
        delete: true
      }
    },
    editor: {
      article: {
        create: true,
        update: true,
        delete: false
      },
      user: {
        create: false,
        update: true,
        delete: false
      },
      role: {
        create: false,
        update: false,
        delete: false
      }
    },
    user: {
      article: {
        create: false,
        update: false,
        delete: false
      },
      user: {
        create: false,
        update: true,
        delete: false
      },
      role: {
        create: false,
        update: false,
        delete: false
      }
    }
  }
}

使用路由守卫验证访问权限

有了权限模型之后，我们就可以使用路由守卫来验证用户的访问权限。在 Vue Router 中，我们可以使用 beforeEach 钩子函数来实现这一点。

router.beforeEach((to, from, next) => {
  const currentUser = getCurrentUser();
  const role = currentUser.role;
  const resource = to.name.split("/")[1];
  const action = to.name.split("/")[2];

  if (!currentUser || !role) {
    next("/login");
  } else {
    const permission = state.permissions[role][resource][action];
    if (permission) {
      next();
    } else {
      next("/unauthorized");
    }
  }
});