前端权限控制架构设计：告别硬编码判断

在 Vue 项目中，可以封装为指令，让模板更简洁：

<!-- 权限指令 -->
<script>
const permissionDirective = {
  mounted(el, binding) {
    const { value } = binding;
    const user = store.getters.user;
    if (!hasPermission(user, value)) {
      el.remove();
    }
  }
};
</script>

<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. 组件级权限控制

对于页面内的按钮或区块，使用通用组件包裹，灵活处理回退方案。

// 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. 设计原则

• 集中管理：权限配置统一存放，便于审计和修改。
• 最小权限：只授予完成工作所需的最小权限集合。
• 动态获取：权限数据应从服务端动态获取，而非前端硬编码。
• 前后端一致：前端仅做体验优化，后端必须兜底校验。

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);

总结

权限控制不仅是技术问题，更是应用安全的基石。分散的判断逻辑会让系统变得脆弱且难以维护。采用 RBAC 模型，结合路由守卫和组件封装，能构建出清晰、可扩展的权限体系。记住，好的权限设计应该像门禁一卡通，而不是每扇门配一把钥匙。