メニュー
基于蓝鲸 IAM 的前端鉴权方案，包含 v-authority 指令实现、权限组件封装及无权限交互规范。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks.
Archive a completed change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete.
Archive multiple completed changes at once. Use when archiving several parallel changes.
Continue working on an OpenSpec change by creating the next artifact. Use when the user wants to progress their change, create the next artifact, or continue their workflow.
Enter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.
Fast-forward through OpenSpec artifact creation. Use when the user wants to quickly create all artifacts needed for implementation without stepping through each one individually.
| id | eng-permission-auth |
| name | 前端权限控制方案 (IAM) |
| category | engineering |
| description | 基于蓝鲸 IAM 的前端鉴权方案，包含 v-authority 指令实现、权限组件封装及无权限交互规范。 |
| tags | ["iam","permission","authority","directive","vue3"] |
| updated_at | "2026-01-09T00:00:00.000Z" |
在蓝鲸体系中，权限控制不仅仅是“显示/隐藏”，更重要的是**“发现与申请”。我们推荐使用“置灰 + 提示申请”**的交互模式。
v-authority这个指令会自动处理点击拦截、样式置灰和申请弹窗的唤起。
使用方式：
<bk-button v-authority="{ permission: hasAuth, actionId: 'host_edit' }">
编辑
</bk-button>
指令功能：
📦 获取完整指令实现：
skill://permission-directive/assets/authority-directive.ts
AuthButton对于需要更多自定义的场景，可封装鉴权按钮组件。
在 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 规则判断是否需要加载