上节我们创建了菜单，这节，我们把菜单给用上，我们重新了创建一个后台管理的首页。

因为教程主要是将后台SpringBoot的，前端现在标准都是用的前后端分离，理论上应该单独编译，单独运行，为了简化前端的难度，笔者发现现在前端被我搞得有点不伦不类了，只能硬着头皮写下去，为了以前的页面不做修改也能使用，只能拿出iframe这个古老的东西了。

1、创建后台首页

我们新建一个后台Controller，用来做后台页面的导航

后台页面由分为头部，左导航，和中间内容区域组成。

首页

新增了一个样式文件

头部

左导航

默认的仪表盘

最终页面效果如下：

2、左导航

添加查询左导航菜单的方法

修改左导航页面

页面效果

下面，我们先录的真实数据进去。

添加菜单点击事件

点击菜单时，我们判断url是否为空，不为空的话，我们就调父页面的goPage方法进行导航操作。

我们在index页面添加goPage方法

效果如下

3、修改登录默认首页

下次登录成功后会自动来到我们的后台首页。

我们将首页里面的几个导航页面都加上权限，只要用户登录即可访问

4、角色与菜单

上面菜单功能其实我们并没有做权限判断，所有的菜单对所有人都是可见的，虽然我们对具体的页面做了判断，但用户点击的时候，才告诉用户没有权限访问页面，这样很不友好。一般来说，我们会再配置一个角色和菜单的关系，即哪些角色可以看哪些菜单。

我们在Role实体里面增加Menu的关联

添加对应的get set方法。

修改角色列表页面，添加分配菜单按钮

页面效果

接下来我们做分配菜单的弹框，我们在最后一个弹框后面增加一个弹框

然后在弹框打开后初始化菜单数据。

页面效果

接下来我们要加上复选框，tree的复选框这里有两种形式，一种就是父子节点完全不关联，一种就是父子节点进行关联。

下面这种情况就是选中子节点的时候，父节点不会做任何操作，除非你手动选中。如果使用这种方案，我们就必须约定好，在配置子节点的时候，父节点必须手动选中，要不然子节点不会再导航时显示。

下面这种就是父子节点关联的情况，选中子节点的时候，父级节点会判断是否需要选中，最少会是一个半选中状态。这种方式是树默认的方式，使用这种方案，我们必须对数据的存储读取做一些特殊处理，存储的时候，我们必须将半选中的节点也存入数据库，但显示的时候，我们传给tree组件的选中对象又必须过滤一下，只传全选中的节点，即叶子节点。

两种方案都是可以的，根据业务场景，个人习惯选择，这里为了简单话，采用第一种方案。

我们来添加复选框

页面效果

因为我们现在还没数据，初始化已有菜单的功能晚点再做，我们先做更新操作，用户点击更新时，我们将所有选中的菜单和当前角色传给后台，后台做一个关联更新。

我们先在RoleController中新增一个更新方法

然后点击按钮的时候调用上面的方法

测试发现数据正常进入后，我们再来修改初始化方法。

这样角色和菜单的关系就完成了。我们给分配菜单添加一个权限字符串，完成权限控制，请笔者自己完成。

5、完善左导航

修改SysController里面原来的getMenus方法，先获取当前用户，看当前用户关联的角色，有哪些菜单权限，然后取个并集

在这里，我们的用户信息是从登录信息里面取出来的（注意SecurityContextHolder的用法），如果用户的关联角色的菜单发生了变化，是不会实时更新的，需要重新登录系统才行，如果想实时生效，我们可以从登录信息里面只取用户id，重新查询角色和菜单。

6、注销

上面说到我们修改了角色的菜单列表，我们需要重新登录才能生效，重新登录我们可以在浏览器手动输入登录地址，这样不友好，通常都是有个注销登录的按钮，现在我们来加上

/logout是Spring Security提供的默认的注销方法，注销完，会自动回到登录界面。

7、总结

到现在为止，我们后台整个权限体系已经建立完了，从登录到授权，到注销。一般权限体系基本上都是在这基础上衍化出来的，这就是我们常说的RBAC，基于角色的授权设计。

代码：

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