crmeb/app/skills/permission-dev/SKILL.md

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   # 登录页（已集成）

核心概念

管理员信息结构

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

权限标识规则

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

Store 使用

Getters

import { mapGetters } from 'vuex';

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

Actions

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

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

权限校验工具

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

引入方式

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 控制显示

<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 便捷调用

<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：多个权限任一匹配

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

示例4：权限指令封装

<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 集成）：

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