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