# 9.7 权限控制

:::tip 概述
前端权限控制通过 `v-perm` / `v-perms` 指令实现按钮级权限控制。
:::

## 权限指令

### v-perm（单权限）

```vue
<template>
  <!-- 只有拥有 sys:user:add 权限的用户才能看到此按钮 -->
  <el-button v-perm="'sys:user:add'" type="primary">新增</el-button>
</template>
```

### v-perms（多权限，满足任一即可）

```vue
<template>
  <!-- 拥有 sys:user:add 或 sys:user:update 任一权限即可 -->
  <el-button v-perms="['sys:user:add', 'sys:user:update']">操作</el-button>
</template>
```

## 指令实现

```typescript
// src/directives/permission.ts

import { usePermission } from '@/hooks/web/usePermission';

export const perm: ObjectDirective = {
  mounted(el: HTMLButtonElement, binding) {
    const { hasSomePermission } = usePermission();
    if (!hasSomePermission(binding.value)) {
      el.parentNode.removeChild(el);  // 无权限则移除元素
    }
  },
};
```

## usePermission Hook

:::tip 超级管理员
用户权限列表包含 `*:*:*` 时，表示超级管理员，拥有所有权限。
:::

```typescript
// src/hooks/web/usePermission.ts

export function usePermission() {
  const userStore = useUserStore();

  /**
   * 检查是否拥有指定权限
   * 超级管理员（permissions 包含 '*:*:*'）拥有所有权限
   */
  function hasSomePermission(permission: string | string[]): boolean {
    const perms = userStore.permissions;
    if (perms.includes('*:*:*')) return true;

    if (typeof permission === 'string') {
      return perms.includes(permission);
    }
    return permission.some((p) => perms.includes(p));
  }

  return { hasSomePermission, hasEveryPermission };
}
```

## 权限数据来源

用户登录后，`/index/getUser` 接口返回权限列表：

```json
{
    "permissions": [
        "sys:user:page",
        "sys:user:add",
        "sys:user:update",
        "sys:user:delete",
        "sys:role:page",
        "..."
    ]
}
```

超级管理员返回 `["*:*:*"]`，拥有所有权限。