前端权限控制设计：拒绝硬编码判断

在 Vue 项目中，我们可以封装自定义指令来简化使用：

// 权限指令（Vue）
const permissionDirective = {
  mounted(el, binding) {
    const { value } = binding;
    const user = store.getters.user;
    if (!hasPermission(user, value)) {
      el.remove();
    }
  }
};

模板中使用起来非常直观：

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

2. 路由权限控制

路由守卫是拦截未授权访问的第一道防线。我们可以在路由元信息中定义所需角色或权限，由全局守卫统一处理。

// router/index.js
const routes = [
  {
    path: '/admin',
    component: AdminLayout,
    meta: { requiresAuth: true, roles: ['admin'] },
    children: [
      {
        path: 'users',
        component: UserManagement,
        meta: { permission: 'user:manage' }
      }
    ]
  }
];

// 路由守卫
router.beforeEach((to, from, next) => {
  const user = store.getters.user;
  
  // 登录校验
  if (to.meta.requiresAuth && !user) {
    next('/login');
    return;
  }
  
  // 角色校验
  if (to.meta.roles && !to.meta.roles.includes(user.role)) {
    next('/403');
    return;
  }
  
  // 权限校验
  if (to.meta.permission && !hasPermission(user, to.meta.permission)) {
    next('/403');
    return;
  }
  
  next();
});

3. 组件级权限控制

对于 React 项目，可以使用高阶组件或专用组件来包裹需要权限的内容。这种方式灵活性更高，支持自定义无权限时的回退 UI。

// components/Permission.jsx
function Permission({ permission, children, fallback = null }) {
  const user = useUser();
  
  if (!hasPermission(user, permission)) {
    return fallback;
  }
  return children;
}

// 使用示例
function UserPage() {
  return (
    <div>
      <h1>用户管理</h1>
      <Permission permission="user:create">
        <button>新建用户</button>
      </Permission>
      <Permission permission="user:delete">
        <button>删除用户</button>
      </Permission>
      <Permission permission="user:export" fallback={<span>无导出权限</span>}>
        <button>导出数据</button>
      </Permission>
    </div>
  );
}

早这么设计，你的权限系统就稳固多了。别告诉我你还在写死权限判断，架构隐患很大。

实战技巧：权限控制指南

1. 权限设计原则

1. 集中管理：权限配置集中存放，避免散落在业务代码中。
2. 最小权限：只给必要的权限，遵循最小特权原则。
3. 动态获取：从服务端获取权限，确保实时性。
4. 前端校验：优化用户体验，后端兜底安全。

2. 最佳实践

建议将权限标识定义为常量，方便维护和复用。

// ✅ 权限常量定义
const PERMISSIONS = {
  USER_VIEW: 'user:view',
  USER_CREATE: 'user:create',
  USER_EDIT: 'user:edit',
  USER_DELETE: 'user:delete'
};

// ✅ 权限组合
const ADMIN_PERMISSIONS = [
  PERMISSIONS.USER_VIEW,
  PERMISSIONS.USER_CREATE,
  PERMISSIONS.USER_EDIT,
  PERMISSIONS.USER_DELETE
];

// ✅ 权限检查
const canEditUser = hasPermission(user, PERMISSIONS.USER_EDIT);

最后想说的

权限控制不是小事，是应用安全的基石。别再写死权限判断了——设计好你的权限系统，应用会更安全、更易维护。

权限控制就像门禁系统，分散管理像每个门一把钥匙，集中管理像一卡通。别做钥匙管理员，做一卡通管理员。