Permission DirectiveSAFE

蓝鲸智云容器管理平台(BlueKing Container Service)

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
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`

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

**使用方式:**
```html
<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` 中处理页面级权限。

```typescript
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 规则判断是否需要加载

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (1)

.codebuddy

Gates applied: no_behavioural_pass.