H5 前端权限控制与菜单渲染

前端权限不只是隐藏几个按钮。菜单、路由、接口和页面内操作共同构成完整的权限链路。如果只处理视觉展示而忽略行为控制，用户仍可能通过直接访问或手动触发绕过限制。

一、权限模型的边界

前端权限控制的目标是体验和引导，不是安全边界。真正的数据安全必须由服务端校验。前端能做的是：不该看的入口不展示，不该做的操作不提供，收到无权限响应时正确处理。

interface Permission {
  code: string;
  enabled: boolean;
}

权限编码应由服务端统一下发，前端不要自行推断“这个角色应该有什么权限”。

二、菜单与权限数据

菜单不应在客户端硬编码每个角色可以看到的入口。应由服务端返回权限编码，前端根据路由配置中的权限要求过滤菜单。

const menuRoutes = [
  {
    path: '/order',
    label: '订单管理',
    permission: 'order.view'
  }
];

const visibleMenus = menuRoutes.filter((route) =>
  hasPermission(route.permission)
);

路由配置声明需要什么权限，权限判断使用统一方法。不要在每个菜单项里写不同的判断逻辑。

三、路由守卫拦截

即使用户手动输入地址，也应在路由层拦截无权限页面。

router.beforeEach((to) => {
  const required = to.meta.permission as string | undefined;

  if (required && !hasPermission(required)) {
    return { path: '/403' };
  }

  return true;
});

权限数据尚未加载时，应等待加载完成后再判断，而不是在未知状态下直接放行或拒绝。

四、按钮级权限

页面内操作要区分展示权限和执行权限。没有权限的按钮应隐藏或禁用，并让用户理解原因。

function canSubmitOrder(): boolean {
  return hasPermission('order.submit');
}

如果按钮只是被隐藏但点击处理函数仍然存在，后续代码变更可能意外暴露入口。操作处理函数内部也应判断权限，形成双重保护。

五、数据权限与操作权限分离

用户可能有查看权限但没有编辑权限，也可能只能看到部分数据。菜单只解决“能否进入页面”，数据范围应由接口返回决定。

interface OrderList {
  orders: Order[];
  canExport: boolean;
}

按钮显隐可以跟随接口返回的权限字段，而不是仅依赖本地权限编码。这样服务端策略调整后，前端展示能自然同步。

六、权限数据刷新

权限可能在用户使用过程中发生变化，例如管理员调整角色或权益过期。关键操作前应使用最新权限数据。

async function refreshPermission(): Promise<void> {
  const result = await permissionApi.list();
  permissionStore.setPermissions(result);
}

如果收到统一的无权限响应码，应更新权限状态并提示用户，而不是继续沿用旧的本地权限。

七、无权限页面体验

直接展示空白页面或报错并不友好。无权限页面应说明原因，并提供可用的返回路径或申请入口。

<section class="forbidden">
  <h1>暂无访问权限</h1>
  <p>请联系管理员开通后重试。</p>
  <button @click="goHome">返回首页</button>
</section>

对于部分权限缺失的页面，只隐藏对应区域，不影响其余正常功能。

八、权限指令与组件封装

在模板中大量重复判断会让代码难以维护。可以封装统一组件或指令。

<PermissionBlock code="order.export">
  <button @click="exportOrders">导出订单</button>
</PermissionBlock>

封装只解决重复问题，不改变权限判断的来源。内部仍应调用统一权限方法，不要复制一份判断逻辑。

九、默认拒绝而不是默认放行

权限判断在异常情况下应默认拒绝。例如权限数据缺失、编码未知或格式错误时，不要因为“解析失败”就显示入口。

function hasPermission(code: string | undefined): boolean {
  if (!code) return true;
  return permissionStore.codes.has(code);
}

没有声明权限的页面可以访问，声明了权限但无法确认拥有时应拒绝。这个默认策略需要在项目中统一约定。

十、测试权限矩阵

权限问题通常由组合引起。应建立权限矩阵覆盖不同角色的核心路径。

• 超级管理员、普通用户、受限用户。
• 菜单展示、路由直达、按钮操作。
• 部分权限缺失和数据范围限制。
• 权限变更后的刷新和恢复。

每次新增权限编码时，都应更新对应路由配置和测试范围，避免出现无人维护的权限入口。

总结

前端权限控制由菜单过滤、路由守卫、按钮控制和操作校验共同完成。权限编码来自服务端，路由配置声明要求，统一方法负责判断，默认策略是明确无权限时拒绝。前端体验要完整，但数据安全始终以服务端校验为准。