JavaScript权限控制实现技巧

const user = {
  name: 'Alice',
  role: 'editor'
};

function hasRole(role) {
  return user.role === role;
}

// 使用
if (hasRole('admin')) {
  showDeleteButton();
}

const user = {
  roles: ['user', 'editor']
};

function hasAnyRole(roles) {
  return roles.some(role => user.roles.includes(role));
}

if (hasAnyRole(['admin', 'editor'])) {
  enableEditFeature();
}

const permissions = ['read:post', 'edit:post'];

function hasPermission(permission) {
  return permissions.includes(permission);
}

// 控制按钮显示
if (hasPermission('edit:post')) {
  document.getElementById('editBtn').style.display = 'block';
}

// 模拟路由跳转前的检查
function navigate(to, from, next) {
  const routeMeta = {
    '/admin': { requiresAuth: true, role: 'admin' },
    '/editor': { requiresAuth: true, permission: 'edit:post' }
  };

  const target = routeMeta[to];

  if (target?.requiresAuth) {
    if (!isLoggedIn()) {
      next('/login');
      return;
    }

    if (target.role && !hasRole(target.role)) {
      next('/forbidden');
      return;
    }

    if (target.permission && !hasPermission(target.permission)) {
      next('/forbidden');
      return;
    }
  }

  next();
}

function vCan(permission) {
  return function(element) {
    if (!hasPermission(permission)) {
      element.parentNode.removeChild(element);
    }
  };
}

// 使用
const btn = document.getElementById('saveBtn');
vCan('create:post')(btn);