Koa+Vue 实现权限控制完整实战-JavaScript中文网-JavaScript教程资源分享门户

前端实现权限控制，是开发中非常常见的一个问题。本文将介绍如何利用 Koa 和 Vue 实现完整的权限控制，内容既适合初学者进行学习，也适合有经验的开发者参考。

为什么需要权限控制？

权限控制是一个非常关键的安全措施，它有以下几个作用：

提高系统安全性：对于一些机密信息或者重要操作，需要进行权限限制，确保只有有权限的用户才能查看或执行。
优化用户体验：只给用户展示他们需要的信息，可以避免用户在不必要的信息流中迷失，并降低 app 界面的复杂度，提高用户易用性，从而优化用户体验。
减少性能浪费：权限控制可以避免将不需要的数据和页面推送给用户，也就减少了服务器和客户端的通信时间和数据传输量。

权限控制的方法

在前端开发中，常见的权限控制方法有两种：

客户端控制：即前端自身来控制权限，通过 if/switch 判断用户是否有某个权限，再展示/隐藏对应的功能。
服务端控制：即将权限控制逻辑放在服务端，前端通过发送请求获取数据或执行操作，服务端判断用户是否有权限，再决定是否返回数据或执行操作。

这两种方法各有优缺点：

客户端控制：前端开发难度低，可以提高页面加载速度；但是缺点是不够安全，容易被恶意用户绕过限制。
服务端控制：安全性更高，能够避免恶意用户绕过权限进行操作；但是性能和开发难度相对较高。

在本文中，我们将针对服务端控制进行介绍。具体实现方法是将权限控制逻辑放在 Koa 后台，将接口返回的数据筛选或者操作结果返回前端。

Koa 权限控制方案

我们将采用 Koa 来实现后台权限控制，主要通过两种方式来控制权限：

基于角色的权限控制
根据用户的权限来限制功能

基于角色的权限控制

在应用中，我们可以将不同的角色进行划分，例如管理员、普通用户等，然后针对不同角色的用户，限制他们可以访问的接口以及接口能够返回的数据。

我们可通过数据库表中字段分组实现。对于用户的角色控制，我们需要在数据库中建立 roles 表以及权限 related 表。

roles 表记录用户角色信息：

CREATE TABLE roles (
  id INT (11) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,
  role_name VARCHAR (50) NOT NULL
);

related 表记录每个角色的权限：

CREATE TABLE related (
  id INT (11) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,
  role_id INT (11) NOT NULL,
  uri VARCHAR (50) NOT NULL,
  create_time DATETIME NOT NULL
);

在每个接口被调用时，都需要验证调用方的角色是否有成功访问该接口的权限。

-- -------------------- ---- -------
----- -------- --------- -------- ---- -
  ----- --- - ------- ------- 
               ---- -----
               ----- ---- ----------------- -- -------- - -------------------------
               ----- ------------------------- - - --- -------- -- ---

  ----- ------- - ----- ---------------- ----------
  ----- ----- - ---------------- -- ----------------

  -- --------------- -
    ----- --- --------------------
  -

  -- ---------- ---
  ----- -------- - ----- ------------------- - ---- ------- ----- ------- -- --- ------------ -----
  ----- ---- - ----------------- -- ----------

  -- ------------------ - -- -
    ----- --- --------------------
  -
-

根据用户的权限来限制功能

在实际项目中，我们通常需要针对不同用户的权限进行控制，例如：不能删除别人的评论、只能修改属于自己的个人信息等。

因此我们需要在前端部署代码时，将每个用户的权限写入到 Cookie 或者 session 中，并在每个需要权限的地方，使用 Koa 先去验证权限。

在代码中，我们以 user_id 为键，将用户的登录信息保存在 Cookie 中。

-- -------------------- ---- -------
----- -------- ----------- ----- ----- -
  ----- ------ - ---------------------------
  ----- --- - ------- - ---- ----- ----- -- - ---
  ----- ------- - ----- ---------------- --------

  -- --------------- --- -- -
    ------ -------
  -

  ----- ---- - -----------
  ------------ - -----
  ----- -------
-

在获取用户信息后，我们需要对调用操作的用户 ID 进行对比，如果操作的不是当前用户，则应该停止操作。

async function checkOperationUser (userId, operatorId) {
  if (Number(userId) !== Number(operatorId)) {
    throw new Error('您不能删除他人评论！');
  }
}

到这里，我们已经实现了 Koa 后台的权限验证，接下来我们需要在前端中，将请求头中所包含的权限信息进行动态展示。

Vue 权限控制方案

在 Vue 中，主要需要针对 UI 界面进行写权限控制。控制的方式有两种：

组件级别的权限
路径级别的权限

组件级别的权限

在许多 UI 界面中，我们可能需要对某个组件进行控制，例如管理员可以查看所有用户的信息，而普通用户只可以查看自己的信息。下面的代码演示了 Vue 中如何基于角色创建可完全控制的组件：

provide: function () { return { checkPermission: this.checkPermission }; },

methods: { /**

@description: 判断用户是否有继续操作
@param {String} operatRole 需要的角色
@return: */ checkPermission (operatRole) { const user = this.$store.state.userInfo; const role = user ? user.role : 'guest'; const validOperation = OPERATIONS[operatRole] || [];

return validOperation.includes(role);

} }

编辑

删除

</template>

路径级别的权限

在许多情况下，我们需要根据用户的角色来控制路由和相关页面的访问权限。下面的代码演示了如何基于角色来限制路由和页面入口的访问，并在路由守卫中进行验证：

/**

@description: 页面需要访问的权限，用户有其中一项权限即可访问 */ const pageRoles = ['admin', 'operator', 'manager'];

/**

@description: 通过元信息中的role来判断用户是否可以访问该页面 */ router.beforeEach((to, from, next) => { if (to.meta.role) { const user = store.state.user;

if (pageRoles.includes(user.role)) { next(); } else { Message({ message: '您无权访问该页面！', type: 'error' }); next(false); }

} else { next(); } });

总结

在本文中，我们介绍了如何利用 Koa 和 Vue 来实现完整的权限控制，并讲解了两种常见的权限控制方式。希望读者能够通过此文的学习，对于前端权限控制开发有更多深入的了解。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/646c283c968c7c53b0b3313a