30分钟掌握vue-pure-admin用户管理：从CRUD到权限控制全攻略

你还在为后台系统的用户管理模块从零开发烦恼？本文带你30分钟快速掌握vue-pure-admin的用户CRUD操作，轻松实现用户列表展示、添加/编辑用户、角色分配和权限控制。读完本文你将获得：

• 用户管理模块的完整操作流程
• 列表查询与筛选的高效使用方法
• 用户添加/编辑的表单设计技巧
• 角色分配与权限控制的实现方式

用户管理模块概览

vue-pure-admin的用户管理模块位于src/views/system/user/目录下，采用前后端分离架构，通过Element-Plus组件库构建交互界面，使用Pinia进行状态管理，完整实现了用户数据的增删改查功能。

模块主要由以下几部分组成：

• 用户列表组件：index.vue
• 用户状态管理：store/modules/user.ts
• 用户API请求：api/user.ts

用户列表展示与筛选

用户列表是管理模块的核心，通过表格形式展示用户信息并提供多条件筛选功能。在src/views/system/user/index.vue中，使用了封装的<pure-table>组件实现数据展示，支持分页、排序和选择操作。

核心功能实现

列表页面包含以下关键功能：

• 多条件搜索：支持用户名、手机号和状态筛选
• 表格操作：新增、编辑、删除用户及批量操作
• 行内操作：上传头像、重置密码、分配角色

<!-- 搜索表单核心代码 -->
<el-form :inline="true" :model="form" class="search-form">
  <el-form-item label="用户名称：" prop="username">
    <el-input v-model="form.username" placeholder="请输入用户名称" clearable />
  </el-form-item>
  <el-form-item label="手机号码：" prop="phone">
    <el-input v-model="form.phone" placeholder="请输入手机号码" clearable />
  </el-form-item>
  <el-form-item label="状态：" prop="status">
    <el-select v-model="form.status" placeholder="请选择" clearable>
      <el-option label="已开启" value="1" />
      <el-option label="已关闭" value="0" />
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSearch">搜索</el-button>
    <el-button @click="resetForm">重置</el-button>
  </el-form-item>
</el-form>

列表数据加载流程

1. 页面加载时调用onSearch方法获取初始数据
2. 通过useUser hook封装数据请求与处理逻辑
3. 表格数据通过dataList属性绑定展示

用户添加与编辑

添加和编辑用户功能通过弹窗表单实现，共用一个对话框组件，通过区分操作类型（新增/编辑）展示不同的表单状态和验证规则。

表单设计要点

• 用户名、手机号、邮箱等基础信息必填
• 密码字段在新增时必填，编辑时可选
• 状态切换使用开关组件，直观展示启用/禁用状态
• 角色选择使用多选框组，支持批量分配

核心实现代码

// 用户管理hook核心逻辑 [src/views/system/user/utils/hook.ts]
const useUser = (tableRef, treeRef) => {
  // 状态定义
  const form = ref({
    username: '',
    phone: '',
    email: '',
    status: 1,
    roleIds: []
  })
  
  // 打开对话框
  const openDialog = (type = 'add', row = {}) => {
    dialogVisible.value = true;
    if (type === 'edit') {
      form.value = { ...row };
    } else {
      resetForm();
    }
  }
  
  // 提交表单
  const submitForm = async () => {
    await ruleFormRef.value.validate();
    // 根据类型调用新增或编辑API
    if (form.value.id) {
      await updateUser(form.value);
    } else {
      await addUser(form.value);
    }
    dialogVisible.value = false;
    onSearch(); // 重新加载列表
  }
  
  return {
    form,
    openDialog,
    submitForm,
    // 其他方法...
  }
}

角色分配与权限控制

vue-pure-admin采用基于角色的权限控制(RBAC)模型，通过分配角色实现用户权限管理。在用户管理模块中，可通过"分配角色"功能为用户批量设置角色。

权限控制实现

1. 角色数据存储在store/modules/user.ts中：

// 用户状态管理
export const useUserStore = defineStore("pure-user", {
  state: () => ({
    // 页面级别权限
    roles: [],
    // 按钮级别权限
    permissions: []
  }),
  actions: {
    /** 存储角色 */
    SET_ROLES(roles: Array<string>) {
      this.roles = roles;
    },
    /** 存储按钮级别权限 */
    SET_PERMS(permissions: Array<string>) {
      this.permissions = permissions;
    }
  }
});

2. 权限验证通过自定义指令实现，在directives/perms/目录下：

// 权限指令实现
import { useUserStoreHook } from '@/store/modules/user';

export const vPerms = {
  mounted(el, binding) {
    const { permissions } = useUserStoreHook();
    if (!permissions.includes(binding.value)) {
      el.parentNode?.removeChild(el);
    }
  }
};

模块核心文件结构

src/views/system/user/
├── index.vue          # 用户列表主页面
├── components/        # 相关组件
│   ├── user-form.vue  # 用户表单组件
│   └── role-select.vue # 角色选择组件
└── utils/
    └── hook.ts        # 业务逻辑钩子

总结与下一步

通过本文的介绍，你已经掌握了vue-pure-admin用户管理模块的核心功能和实现方式。该模块不仅提供了基础的CRUD操作，还集成了角色分配和权限控制功能，可直接应用于实际项目开发。

下一步建议：

1. 深入学习src/store/modules/user.ts了解状态管理实现
2. 研究src/api/user.ts掌握API请求封装技巧
3. 尝试扩展用户管理功能，如添加用户导入导出功能

如果你觉得本文对你有帮助，请点赞收藏，关注作者获取更多vue-pure-admin使用技巧！下期我们将介绍菜单管理模块的高级应用。