使用JavaScript位运算巧妙实现权限管理

原创

喵喵侠

修改于 2024-07-27 20:05:47

2330

修改于 2024-07-27 20:05:47

文章被收录于专栏：喵喵侠的社区活动征文喵喵学前端

前言

大家好，我是喵喵侠。昨天一位前端开发妹子找我聊天，向我请教问题，我看她写的函数代码是这样的，发现她有这么一段逻辑，用于来做权限判断，代码截图如下：

由上图可以看到，她这里做了很多条件判断，基本都是与的操作。这种传统的权限管理方法，依赖于复杂的条件判断和角色检查，写起来会比较繁琐，而位运算提供了一种简洁且高效的解决方案。本文将介绍如何使用JavaScript位运算来实现权限管理，下次做权限管理，你就可以用这种全新的方式进行处理了。

什么是位运算？

位运算是计算机底层的一种运算方式，它直接对二进制位进行操作。常见的位运算包括：

按位与（&）：两个二进制位都为1时，结果为1，否则为0。
按位或（|）：两个二进制位只要有一个为1，结果为1，否则为0。
按位异或（^）：两个二进制位不同，结果为1，相同为0。
按位取反（~）：将二进制位0变1，1变0。
左移（<<）：将二进制位全部左移若干位，右边补0。
右移（>>）：将二进制位全部右移若干位，左边补符号位。

上面的位运算规则，想必大家在看技术书籍的时候看到过，但不知道实际上有什么用。接下来我将写一个简单例子，你就知道位运算用来做权限管理，是多么的简洁优雅。

位运算在权限管理中的应用

权限管理的核心在于定义和检查权限。我们可以使用位掩码（bitmask）来表示不同的权限，每个权限对应一个唯一的二进制位。通过位运算，我们可以方便地组合、检查和修改权限。

1. 定义权限

首先，我们需要定义不同的权限。假设我们有以下权限：

读取（READ）：1
写入（WRITE）：2
更新（UPDATE）：4
删除（DELETE）：8

之所以这样每个权限是2的N次方，是方便用二进制来做权限操作。

我定义了四个权限，分别是READ（读取）、WRITE（写入）、UPDATE（更新）、DELETE（删除），这里面每个权限对应一个二进制位：

const READ = 1;    // 0001
const WRITE = 2;   // 0010
const UPDATE = 4;  // 0100
const DELETE = 8;  // 1000

2. 组合权限

我们可以使用按位或（|）操作符来组合多个权限。例如，要同时授予读取和写入权限：

let userPermissions = READ | WRITE; // 0001 | 0010 = 0011

复习一下：按位或（|）是有1得1，否则得0。

3. 检查权限

要检查某个用户是否拥有特定权限，我们可以使用按位与（&）操作符。例如，检查用户是否有写入权限：

const hasWritePermission = (userPermissions & WRITE) !== 0; // 0011 & 0010 = 0010

如果结果不为0，则表示用户拥有该权限。

复习一下：按位与（&）需要两个都为1才是1，否则就是0。

4. 添加和移除权限

可以使用按位或（|）操作符添加权限，使用按位与（&）和按位取反（~）操作符移除权限。例如，添加更新权限：

userPermissions |= UPDATE; // 0011 | 0100 = 0111

复习一下：按位或（|）是有1得1，否则得0。

移除写入权限，先按位取反（~），再通过按位与（&）实现：

userPermissions &= ~WRITE; // 0111 & ~0010 = 0111 & 1101 = 0101

复习一下：按位取反（~）是每一位反转，0变1，1边0；按位与（&）需要两个都为1才是1，否则就是0。

5. 示例代码

下面我准备了一个完整的示例，展示了如何使用位运算进行权限管理：

const READ = 1; // 0001
const WRITE = 2; // 0010
const UPDATE = 4; // 0100
const DELETE = 8; // 1000

let userPermissions = 0;

// 添加权限
function addPermission(permissions, permission) {
  return permissions | permission;
}

// 移除权限
function removePermission(permissions, permission) {
  return permissions & ~permission;
}

// 检查权限
function hasPermission(permissions, permission) {
  return (permissions & permission) !== 0;
}

// 给用户添加READ和WRITE权限
userPermissions = addPermission(userPermissions, READ);
userPermissions = addPermission(userPermissions, WRITE);

console.log("用户权限:", userPermissions); // 输出: 3 (0011)

console.log("拥有读取权限:", hasPermission(userPermissions, READ)); // 输出: true
console.log("拥有写入权限:", hasPermission(userPermissions, WRITE)); // 输出: true
console.log("拥有更新权限:", hasPermission(userPermissions, UPDATE)); // 输出: false

// 移除WRITE权限
userPermissions = removePermission(userPermissions, WRITE);

console.log("移除写入权限后的用户权限:", userPermissions); // 输出: 1 (0001)
console.log("拥有写入权限:", hasPermission(userPermissions, WRITE)); // 输出: false