iam

id: eng-permission-auth name: 前端权限控制方案 (IAM) category: engineering description: 基于蓝鲸 IAM 的前端鉴权方案，包含 v-authority 指令实现、权限组件封装及无权限交互规范。 tags: [iam, permission, authority, directive, vue3] updated_at: 2026-01-09

前端权限控制方案 (IAM)

在蓝鲸体系中，权限控制不仅仅是“显示/隐藏”，更重要的是**“发现与申请”。我们推荐使用“置灰 + 提示申请”**的交互模式。

1. 核心指令 v-authority

这个指令会自动处理点击拦截、样式置灰和申请弹窗的唤起。

使用方式：

<bk-button v-authority="{ permission: hasAuth, actionId: 'host_edit' }">
  编辑
</bk-button>

指令功能：

• 有权限 → 正常交互
• 无权限 → 置灰 + 点击触发申请弹窗 + Tooltip 提示

📦 获取完整指令实现：skill://permission-directive/assets/authority-directive.ts

2. 鉴权组件 AuthButton

对于需要更多自定义的场景，可封装鉴权按钮组件。

3. 路由级鉴权

在 vue-router 的 beforeEach 中处理页面级权限。

router.beforeEach(async (to, from, next) => {
  const meta = to.meta as any;
  if (meta.auth) {
    const hasAuth = await checkPageAuth(meta.authAction);
    if (!hasAuth) {
      next({ name: '403', query: { action: meta.authAction } });
      return;
    }
  }
  next();
});

📦 可用资源

• skill://permission-directive/assets/authority-directive.ts

根据 SKILL.md 中的 IF-THEN 规则判断是否需要加载