上节我们完成了用户角色权限的增删改查，但是我们没有处理对象之间的关联关系，用户和角色，角色和权限之间的关联并没有建立。这节，以用户和角色的关联关系为例进行介绍。

我们先准备几条测试数据

之前还有一个小错误修正一下，User类中的属性role是一个集合，我们一般使用复数命名，虽然不影响功能，这里我们还是修改一下，将role改成roles。

1、增加分配角色按钮

我们增加一个分配角色按钮，点击按钮，弹出该用户的已有角色列表。

已有角色列表弹出框

增加两个属性，hasRoleDialogVisible用来标志弹出框是否显示，hasRoleData用来存储当前编辑用户的已有角色列表。

点击分配角色按钮时，触发assignRoles方法，这时，我们在弹出页面之前，应该先对hasRoleData赋值。对于我们现在这个例子来说，返回的用户信息就包含了角色列表，如果实际场景，用户信息里面没包含角色列表，那么我们就需要重新请求后台。

2、添加角色按钮

我们现在需要一个按钮，用来从未关联的角色列表中添加角色。

点击右上角的加号按钮，我们应该再弹出一个框，里面显示该用户没有关联的用户列表，这样我们后台先需要有一个服务，根据用户id，查询该用户没有关联的角色列表。

3、查询用户未关联的角色

我们先给UserRepository添加一个查询方法：

这里使用了JPA提供的一个函数elements，这个hql表示查询角色和用户表中指定用户id，且角色不在改用户的角色列表中的所有角色。如何我们要查询该用户已有的角色列表怎么查呢？答案是：

select r from Role r join User u u.roles where u.id=:userId

我们在UserController中再增加查询服务：

增加点击右上角增加角色按钮弹出框

添加几个data属性：

notHasRoleDialogVisible用来标志用户未关联角色列表弹出框的状态，notHasRoleDialogVisible存储未关联角色列表信息，currentUser用来存储当前编辑的用户对象。

现在我们来完成showAddRolePage方法。

因为用户已有的角色列表一般不会太多，所以已有列表我们没有进行分页，而未关联的角色列表可能会很多，需要进行分页，这里，我们先还得增加几个分页参数给他用。

4、添加角色方法

我们再来完善增加方法，增加方法就是给用户加上一个角色，这里我们只需要用户id和角色id两个参数即可，我们先写后台服务：

我们先要注入roleRepository，然后将角色添加到用户的角色列表中去，最后我们只需要保存用户，用户和角色的关联关系将会自动完成。

我们添加完一个角色后，重新查询下数据，这样页面就实时刷新了。但是这里有个问题，如果当前页面只有一条记录，这时添加完后，刷新当前页面，变成了空白，一般我们最好是回到最后一条记录的前一页。

这是一个容易忽略的地方，碰到这种情况大家要知道如何处理。

接下来，我们在关闭未关联角色列表的时候，需要刷新已关联角色列表数据。由于我们并没有查询用户已关联的角色列表的服务，之前的角色列表是从用户信息中自动关联查询的，我们现在改成，增加完角色后，将角色添加的用户的角色列表中去。

这样，用户的已关联角色列表就可以动态刷新了。

5、移除角色

最后我们还剩一个移除角色没有完成，同样的，我们先增加后台方法，接收参数和添加角色一致：

这样，我们整个例子就完整了。

6、总结：

这几章内容比较长，给用户赋予角色，看起来很简单的一个功能，实际上做起来还挺复杂的。角色关联权限的业务其实跟用户关联角色其实是非常类似的，这个功能就留着读者自己实现了。

代码：

https://github.com/www15119258/springboot-study/tree/branch21