有感于公司旁边的兰州拉面进化成了兰州料理，咱们的小破项目也被我做了一次品牌升级，虽然并没有什么卵用。

近两年在深圳，发现评价高的店味道不一定好吃，但环境、服务一定ok，过去很火的苍蝇铺子小吃摊逐渐吃不开了。人们的喜好在随经济发展变迁，这种发展变迁其实是有迹可循的，从先发展的地方搬运理念，是一种很常见的赚钱思路。然而现在人人都明白这个事，想做好不那么容易，所以这两年到处在嚷嚷下沉经济、垂直领域。昨天看了一篇分析商业趋势的长文，里面讲“区域崛起与县域经济”下产生的隐性冠军企业，提到全世界 60% 的假发产自我的家乡河南许昌，据说远销非洲大陆，这我还是头一次听说，不知道各位老铁有没有相关需求，要是你们够给力，我就辞职回去当一波靠山吃山的地头蛇。

（韭菜分割线）

这篇文章主要讲在已经实现了菜单和功能访问控制的情况下，如何编写实现 角色、权限、菜单分配 功能的接口与页面，本质是增删改查、表单表格，但以下知识点需要拿出来讲一下：

• JPA 如何自定义查询语句？
• 如何使用 element-ui 的树组件？
• 如何接收并处理没有实体类型对应的数据？
• Vue 如何不刷新清除路由记录？

这里每一个点讲深了都值得单独写一篇文章，你们要是有分享知识的欲望又苦于没有题材，完全可以从我每篇教程列出来的点里随便挑一个扩充一下，只要排版排到位再起个好题目，肯定会有不少人看。

角色分配，也就是给用户指定角色。根据我们之前的数据库设计，本质是更新 admin_user_role 表。为了实现这个目的，我们需要进行一系列的开发。

首先，我们要有一个组件负责展示查询出来的用户信息，并提供编辑操作的入口。element 的 table 组件提供了表格能用到的很多功能，比如排序、筛选、选择、懒加载等等，用的时候尽管怎么骚怎么来。我反正一直是走简约风格的：

这个组件具体展示哪些信息可以根据你的喜好，但是一般来说没人会在这儿展示用户密码吧？而且 Hash 过的密码展示了也没用啊。前端可以控制显示的字段，但最好还是对后端查询的接口做相应的改造，直接不查询相应的内容。

JPA 默认查询出来的就是全量的数据，如果想指定字段，就需要自定义查询语句了。自定义查询语句写在 JpaRepository 类的方法上面，也就是我们的 UserDAO.java 中的 list() 方法：

@Query(value = "select new User(u.id,u.username,u.name,u.phone,u.email,u.enabled) from User u")
List<User> list();

这是 JPQL 的写法，也可以写原生的 SQL 语句，指定 nativeQuery = true 即可。前端表格示例代码如下：

<el-table
  :data="users"
  stripe>
  <el-table-column
    prop="id"
    label="id"
    width="100">
  </el-table-column>
  <el-table-column
    prop="username"
    label="用户名"
    fit>
  </el-table-column>
  
  ······
  
  <el-table-column
    label="操作"
    width="120">
    <template slot-scope="scope">
      <el-button
        @click="editUser(scope.row)"
        type="text"
        size="small">
        编辑
      </el-button>
      <el-button
        type="text"
        size="small">
        移除
      </el-button>
    </template>
  </el-table-column>
</el-table>

通过 data 绑定表格对应的数据，并通过 prop 指定列对应的字段。若想对表格里某一行的数据进行操作，就要想办法获取当前的数据。观察 “操作” 一列的代码：

<el-table-column
  label="操作"
  width="120">
  <template slot-scope="scope">
    <el-button
      @click="editUser(scope.row)"
      type="text"
      size="small">
      编辑
    </el-button>
  </template>
</el-table-column>

scope.row 便是点击编辑按钮所获取到的该行的数据。这里实际上利用的是作用域插槽，通过 <el-table-column> 组件获取到了数据。关于插槽，如果有不清楚的地方，可以看看下面这篇文章：

因为我们的用户和角色是多对多的关系，所以这里使用了多选框组件。为了正确显示用户对应的角色，我们需要先把所有的角色信息查询出来，再根据用户信息选中相应的角色。

查询出所有角色的方法很简单，在 mounted() 方法中调用即可。关键是如何选中当前用户对应的角色。

首先，我们需要查询出当前用户的角色。这时有两种思路：

• 第一种，可以以用户名或 id 为参数向后端发送请求，查询出对应的角色值并返回
• 第二种，改造后端查询用户信息的接口，直接在查询用户信息时就把角色信息查询出来

为了前后端传递参数更方便一些，我选用了第二种方法。使用这种方法需要在 User 实体类中添加属性来存放角色信息，但是由于数据库中并没有相应定义，所以我们要加上 @Transient 注释。

    @Transient
    List<AdminRole> roles;

	// getter and setter
    public List<AdminRole> getRoles() {
        return roles;
    }

    public void setRoles(List<AdminRole> roles) {
        this.roles = roles;
    }

相应地在 UserService 中修改列出所有用户的方法：

    public List<User> list() {
        List<User> users =  userDAO.list();
        List<AdminRole> roles;
        for (User user : users) {
            roles = adminRoleService.listRolesByUser(user.getUsername());
            user.setRoles(roles);
        }
        return users;
    }

在 AdminRoleService 中添加 listRolesByUser() 方法：

    public List<AdminRole> listRolesByUser(String username) {
        int uid =  userService.findByUserName(username).getId();
        List<AdminRole> roles = new ArrayList<>();
        List<AdminUserRole> urs = adminUserRoleService.listAllByUid(uid);
        for (AdminUserRole ur: urs) {
            roles.add(adminRoleDAO.findById(ur.getRid()));
        }
        return roles;
    }

这样查询出的用户就会带上角色信息了。

之后，我们使用 <el-checkbox-group>，也就是多选框组来实现角色的显示与编辑。观察如下代码：

<el-form-item label="角色分配" label-width="120px" prop="roles">
  <el-checkbox-group v-model="selectedRolesIds">
      <el-checkbox v-for="(role,i) in roles" :key="i" :label="role.id">{{role.nameZh}}</el-checkbox>
  </el-checkbox-group>
</el-form-item>

roles 是从后端查询到的所有角色信息，我们通过遍历渲染出角色的中文名称，并指定多选框的 label 值为 role.id 。selectedRolesIds 是一个 Array 类型的变量，也就是当前用户对应的角色的 id。组件会根据其中的数据匹配 label 值，并选中相应的内容。

可以在点击编辑按钮时调用处理方法，获取当前用户对应的角色的 id：

 editUser (user) {
   this.dialogFormVisible = true
   this.selectedUser = user
   let roleIds = []
   for (let i = 0; i < user.roles.length; i++) {
     roleIds.push(user.roles[i].id)
   }
   this.selectedRolesIds = roleIds
 }

这样，对话框中的角色信息就能正确渲染了。由于 selectedRolesIds 是与多选框双向绑定的，我们通过点选就可以改变这个 Array 的值。还是为了后端接收方便，我们在提交更改时可以做一些处理，通过这些角色 id 获得角色本身并传递。

onSubmit (user) {
  let _this = this
  // 根据视图绑定的角色 id 向后端传送角色信息
  let roles = []
  for (let i = 0; i < _this.selectedRolesIds.length; i++) {
    for (let j = 0; j < _this.roles.length; j++) {
      if (_this.selectedRolesIds[i] === _this.roles[j].id) {
        roles.push(_this.roles[j])
      }
    }
  }
  this.$axios.put('/admin/user', {
    username: user.username,
    name: user.name,
    phone: user.phone,
    email: user.email,
    roles: roles
  }).then(resp => {
    if (resp && resp.status === 200) {
      this.$alert('用户信息修改成功')
      this.dialogFormVisible = false
      // 修改角色后重新请求用户信息，实现视图更新
      this.listUsers()
    }
  })
}

后端对应的接口代码如下：

@PutMapping("/api/admin/user")
public Result editUser(@RequestBody User requestUser) {
    User user = userService.findByUserName(requestUser.getUsername());
    user.setName(requestUser.getName());
    user.setPhone(requestUser.getPhone());
    user.setEmail(requestUser.getEmail());
    userService.addOrUpdate(user);
    adminUserRoleService.saveRoleChanges(user.getId(),requestUser.getRoles());
    String message = "修改用户信息成功";
    return ResultFactory.buildSuccessResult(message);
}

saveRoleChanges() 方法即修改 admin_user_role 表里相应的内容。修改的思路是先删除原有用户(uid)对应的所有行，再根据新传递的数据做插入操作。这样的缺点是比较费自增 id（其实无所谓），但省去了比对的麻烦。

@Transactional
public void saveRoleChanges(int uid, List<AdminRole> roles) {
    adminUserRoleDAO.deleteAllByUid(uid);
    for (AdminRole role : roles) {
        AdminUserRole ur = new AdminUserRole();
        ur.setUid(uid);
        ur.setRid(role.getId());
        adminUserRoleDAO.save(ur);
    }
}

因为我们执行了删除操作，所以需要加上 @Transactional 注释开启事务，以保证数据的一致性。（不加是会跑出异常的哈）

OK，这样我们就完成了角色分配功能的开发。

权限分配即为角色指定对应的权限。模仿上面的步骤，开发一套角色信息列表、编辑框即可。

值得一讲的是菜单配置功能的实现。

本来菜单分配也是一样的逻辑，但谁让人家是树结构呢。