当前位置：首页 > JavaScript

js实现权限选择

2026-04-04 14:53:14JavaScript

权限选择实现方法

基于角色的权限控制（RBAC）

RBAC是一种常见的权限管理模型，通过角色来控制用户权限。在JavaScript中可以通过对象或数组来定义角色和权限。

const roles = {
  admin: ['create', 'read', 'update', 'delete'],
  editor: ['create', 'read', 'update'],
  viewer: ['read']
};

function checkPermission(userRole, requiredPermission) {
  return roles[userRole]?.includes(requiredPermission);
}

基于权限位的控制

使用二进制位来表示不同权限，适合权限种类固定的场景。

const PERMISSIONS = {
  READ: 1 << 0,    // 0001
  WRITE: 1 << 1,   // 0010
  DELETE: 1 << 2,  // 0100
  ADMIN: 1 << 3    // 1000
};

function hasPermission(userPermissions, requiredPermission) {
  return (userPermissions & requiredPermission) === requiredPermission;
}

前端路由权限控制

结合前端路由实现页面级别的权限控制。

const protectedRoutes = [
  {
    path: '/admin',
    requiredPermissions: ['admin']
  },
  {
    path: '/editor',
    requiredPermissions: ['editor', 'admin']
  }
];

function canAccessRoute(userRole, path) {
  const route = protectedRoutes.find(r => r.path === path);
  return route?.requiredPermissions.includes(userRole);
}

组件级权限控制

在React中可以使用高阶组件或自定义Hook实现组件级权限控制。

// React高阶组件实现
function withPermission(Component, requiredPermission) {
  return function WrappedComponent(props) {
    const userPermissions = getUserPermissions(); // 获取用户权限

    if (!userPermissions.includes(requiredPermission)) {
      return <div>无权限访问</div>;
    }

    return <Component {...props} />;
  };
}

// 使用示例
const AdminPanel = withPermission(AdminComponent, 'admin');

Vue指令实现权限控制

在Vue中可以通过自定义指令实现元素级别的权限控制。

Vue.directive('permission', {
  inserted: function (el, binding) {
    const requiredPermission = binding.value;
    const userPermissions = store.getters.permissions;

    if (!userPermissions.includes(requiredPermission)) {
      el.parentNode.removeChild(el);
    }
  }
});

// 使用示例
<button v-permission="'delete'">删除</button>

权限树实现

对于复杂的权限系统，可以使用树形结构表示权限层级关系。

class PermissionNode {
  constructor(name, children = []) {
    this.name = name;
    this.children = children;
  }

  hasPermission(permissionPath) {
    const parts = permissionPath.split('.');
    let current = this;

    for (const part of parts) {
      const child = current.children.find(c => c.name === part);
      if (!child) return false;
      current = child;
    }

    return true;
  }
}

// 构建权限树
const root = new PermissionNode('root', [
  new PermissionNode('user', [
    new PermissionNode('create'),
    new PermissionNode('read')
  ]),
  new PermissionNode('post', [
    new PermissionNode('delete')
  ])
]);

// 检查权限
root.hasPermission('user.create'); // true
root.hasPermission('post.edit');   // false