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

在 Vue 项目中，可以通过自定义指令简化使用：

<!-- templates -->
<button v-permission="'user:edit'">编辑用户</button>

2. 路由层级防护

对于受保护的路由，应在路由守卫中进行拦截。这能确保未授权用户无法直接访问 URL。

// router/index.js
router.beforeEach((to, from, next) => {
  const user = store.getters.user;
  
  // 登录检查
  if (to.meta.requiresAuth && !user) {
    return next('/login');
  }
  
  // 角色权限检查
  if (to.meta.roles && !to.meta.roles.includes(user.role)) {
    return next('/403');
  }
  
  // 具体权限检查
  if (to.meta.permission && !hasPermission(user, to.meta.permission)) {
    return next('/403');
  }
  
  next();
});

3. 组件级权限封装

为了保持模板整洁，建议封装一个通用的权限组件。这样可以在 JSX 或模板中灵活控制元素的显示与隐藏。

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

// usage
<Permission permission="user:create">
  <button>新建用户</button>
</Permission>

最佳实践建议

在设计权限系统时，有几个原则值得遵循：

1. 集中管理：权限配置应存放在单一数据源，便于统一调整。
2. 最小权限：默认不给权限，按需分配，降低风险。
3. 动态获取：尽量从服务端下发权限列表，而非前端硬编码。
4. 后端兜底：前端仅做体验优化，关键操作必须经过后端校验。

此外，建议将权限常量提取出来，避免魔法字符串：

const PERMISSIONS = {
  USER_VIEW: 'user:view',
  USER_CREATE: 'user:create',
  USER_EDIT: 'user:edit',
  USER_DELETE: 'user:delete'
};

结语

权限控制不仅是技术问题，更是安全策略的体现。与其在每个页面重复编写判断逻辑，不如建立一套清晰的权限体系。做好这一点，你的应用会更安全，维护起来也更轻松。