---
name: 权限功能开发
description: This skill should be used when developing permission-related features in the UniApp property management mini-program. It provides guidance on admin info fetching, permission checking, role validation, and integrating permission controls into components.
---

# 权限功能开发

物业小程序已集成权限管理功能，参考 PC 端 `admin/src/directive/permission` 实现。提供便捷的权限校验方式，用于控制组件或功能入口的显示隐藏。

## 相关文件

```
app/
├── api/
│   └── property.js              # 管理员信息接口
├── config/
│   └── cache.js                  # 缓存常量
├── store/
│   ├── modules/
│   │   └── app.js                # 状态管理
│   └── getters.js                # 数据获取
├── utils/
│   └── auth/
│       └── permission.js          # 权限校验工具
└── pages/users/login/index.vue   # 登录页（已集成）
```

## 核心概念

### 管理员信息结构

```javascript
{
  id: 1,                    // 管理员ID
  account: "admin",         // 账号
  realName: "超管",         // 真实姓名
  roles: "1",               // 角色标识
  permissionsList: ["*:*:*"], // 权限列表
  phone: "11111111111",     // 手机号
  status: true              // 状态
}
```

### 权限标识规则

- `*:*:*` - 超管权限，拥有所有权限
- `system:user:add` - 系统管理-用户-新增
- `system:user:edit` - 系统管理-用户-编辑

## Store 使用

### Getters

```javascript
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'adminInfo',      // 管理员完整信息
      'permissions',    // 权限列表
      'roles',          // 角色列表
      'isSuperAdmin'    // 是否超管
    ])
  }
};
```

### Actions

```javascript
// 获取管理员信息
this.$store.dispatch('ADMIN_INFO').then(res => console.log(res));

// 登录后自动获取（已在登录流程中集成）
this.$store.dispatch('LOGIN_ADMIN_INFO');
```

## 权限校验工具

文件位置：`app/utils/auth/permission.js`

### 引入方式

```javascript
import { checkPermi, checkRole, isSuperAdmin, getPermissions, getRoles, getAdminInfo } from '@/utils/auth/permission.js';
```

### 方法说明

| 方法 | 说明 | 示例 |
|------|------|------|
| `checkPermi(value)` | 权限校验 | `checkPermi('system:user:add')` |
| `checkRole(value)` | 角色校验 | `checkRole('admin')` |
| `isSuperAdmin()` | 判断超管 | `isSuperAdmin()` |
| `getPermissions()` | 获取权限列表 | `getPermissions()` |
| `getAdminInfo()` | 获取管理员信息 | `getAdminInfo()` |

## 使用示例

### 示例1：v-if 控制显示

```vue
<template>
  <button v-if="checkPermi('system:user:add')">添加用户</button>
  <view v-if="checkRole('admin')">管理员专属区域</view>
</template>

<script>
import { checkPermi, checkRole } from '@/utils/auth/permission.js';

export default {
  methods: {
    addUser() {
      if (!checkPermi('system:user:add')) {
        uni.showToast({ title: '无操作权限', icon: 'none' });
        return;
      }
    }
  }
};
</script>
```

### 示例2：computed 便捷调用

```vue
<template>
  <button v-if="canAdd">添加用户</button>
  <button v-if="canEdit">编辑</button>
</template>

<script>
import { checkPermi } from '@/utils/auth/permission.js';

export default {
  computed: {
    canAdd() { return checkPermi('system:user:add'); },
    canEdit() { return checkPermi('system:user:edit'); }
  }
};
</script>
```

### 示例3：多个权限任一匹配

```vue
<button v-if="checkPermi(['system:user:add', 'system:user:edit'])">
  新增或编辑
</button>
```

### 示例4：权限指令封装

```vue
<template>
  <button v-permission="'system:user:add'">添加</button>
</template>

<script>
import { permissionDirective } from '@/utils/auth/permission.js';

export default {
  directives: {
    permission: permissionDirective
  }
};
</script>
```

## 与登录流程集成

登录成功后自动获取管理员信息（已在 `app/pages/users/login/index.vue` 集成）：

```javascript
this.$store.commit("SETUID", data.uid);
getUserInfo().then(res => {
  this.$store.commit("UPDATE_USERINFO", res.data);
  this.$store.dispatch('LOGIN_ADMIN_INFO'); // ✅ 自动获取管理员信息
});
```

## 退出登录清理

退出登录时自动清理管理员信息（已在 `app/store/modules/app.js` 的 LOGOUT mutation 中集成）。

## 注意事项

1. **权限标识大小写敏感** - 权限标识严格区分大小写
2. **超管权限** - 拥有 `*:*:*` 权限的用户拥有所有权限
3. **登录检查** - 使用权限前确保用户已登录
4. **缓存持久化** - 管理员信息会缓存到本地Storage