JavaScript权限控制_RBAC模型前端实现

{
  "userId": 1001,
  "username": "alice",
  "roles": ["admin"],
  "permissions": [
    "user:create",
    "user:delete",
    "post:edit",
    "report:view"
  ]
}

function hasPermission(permission) {
  const user = JSON.parse(localStorage.getItem('user'));
  return user?.permissions?.includes(permission);
}

{hasPermission('user:create') && <button>新增用户</button>}

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const user = JSON.parse(localStorage.getItem('user'));

  if (requiresAuth) {
    if (!user) {
      next('/login');
    } else if (to.meta.permission && !user.permissions.includes(to.meta.permission)) {
      next('/403'); // 无权限页面
    } else {
      next();
    }
  } else {
    next();
  }
});

{
  path: '/users',
  component: UserList,
  meta: { requiresAuth: true, permission: 'user:view' }
}

const menuList = [
  {
    name: '用户管理',
    path: '/users',
    permission: 'user:view',
    children: [
      { name: '新增用户', path: '/users/create', permission: 'user:create' }
    ]
  }
];

function filterMenu(menus) {
  return menus
    .filter(menu => !menu.permission || hasPermission(menu.permission))
    .map(menu => {
      if (menu.children) {
        menu.children = filterMenu(menu.children);
      }
      return menu;
    });
}

// Vue 示例
app.directive('permission', {
  mounted(el, binding) {
    const { value } = binding;
    if (value && !hasPermission(value)) {
      el.parentNode.removeChild(el);
    }
  }
});

<button v-permission="'user:delete'">删除用户</button>