为了让更多同学学习到前后端分离管理系统的搭建过程，这里我写了详细的开发过程的文档，使用的是springsecurity + jwt + vue的技术栈组合，如果有帮助，别忘了点个赞和关注我的公众号哈！

转载请保留此声明，感谢！

另外我还有另外一个前后端博客项目博客VueBlog，如果有需要可以关注公众号MarkerHub，回复【VueBlog】获取哈！！

("认证失败！未登录！");

后面我们就可以使用admin/111111登录我们的系统哈。
但是先我们登录过程系统不是从我们数据库中获取数据的，因此，我们需要重新定义这个查用户数据的过程，我们需要重写UserDetailsService接口。

• ("权限不够！！");

  ok，我们来开始我们的编码

• * 获取当前用户的菜单栏以及权限

接口中sysUserMapper.getNavMenuIds我们之前就已经写过的了，通过用户id获取菜单的id，然后后面就是转成树形结构，buildTreeMenu方法的思想很简单，我们现实把菜单循环，让所有菜单先找到各自的子节点，然后我们在把最顶级的菜单获取出来，这样顶级下面有二级，二级也有自己的三级。最后就是convert把menu转成menuDto。这个比较简单，就不说了。
好了，导航菜单已经开发完毕，我们来写菜单管理的增删改查，因为菜单列表也是个树形接口，这次我们就不是获取当前用户的菜单列表的，而是所有菜单然后组成树形结构，一样的思想，数据不一样而已。

• // 清除所有与该菜单相关的权限缓存 // 先清除所有与该菜单相关的权限缓存

  删除、更新菜单的时候记得调用根据菜单id清楚用户权限缓存信息的方法哈。然后每个方法前都会带有权限注解：@PreAuthorize("hasAuthority('sys:menu:delete')")，这就要求用户有特定的操作权限才能调用这个接口，sys:menu:delete这些数据不是乱写出来的，我们必须和数据库的数据保持一致才行，然后component字段，也是要和前端进行沟通，因为这个是链接到的前端的组件页面。
  有了增删改查，我们就去先添加我们的所有的菜单权限数据先。效果如下：

基本上线填好所有菜单的列表和增删改查操作权限，就ok。

角色的增删改查其实也简单，而且字段这么少，基本上吧菜单的增删改查复制过来，然后把menu改成role，在调整一下就差不多啦。然后有个角色关联菜单的操作，这个我们等下讲讲，先来看代码：

获取角色信息的方法，因为我们不仅仅在编辑角色时候会用到这个方法，在回显角色关联菜单的时候也需要被调用，因此我们需要把角色关联的所有的菜单的id也一并查询出来，也就是分配权限的操作。对应到前端就是这样的，点击分配权限，会弹出出所有的菜单列表，然后根据角色已经关联的菜单的id回显勾选上已经关联过的。效果如下：

然后点击保存分配权限的时候，我们需要把角色的id和所有勾选上的菜单id的数组一起传过来，所以才有了controller中的这样的写法：

可以看到，因为@RequestBody，我们知道menuIds是否安装body里面的，这个需要注意，对应到的前端写法就是这样：

ok，角色管理就讲到这里了，其他增删改查自己看下代码，不难哈。

用户管理里面有个用户关联角色的分配角色操作，和角色关联菜单的写法差不多的，其他增删改查也复制黏贴改改就好，哈哈。

• * 超级管理员重置密码

  上面用到一个sysRoleService.listRolesByUserId，通过用户id获取所有关联的角色，用到了中间表，可以写sql，这里我这样写的：

• userId一定要是自己数据库查出来的，千万别让前端传过来啥就直接调用这个方法，不然会可能会被攻击，嘿嘿嘿~最委托就是写完整的sql，而不是这样半个sql的写法。
  

部署项目其实和vueblog的部署是一样的，自己调整一下吧少年，我有写了视频和文档的：

好了，我们终于又写完了一个项目，希望能让你们学到点东西，这次写的文档有点乱，多多担待，太长了，写着写着就不知道写哪了，哈哈。

另外我还有另外一个前后端博客项目博客，如果有需要可以关注公众号MarkerHub，回复【VueBlog】获取哈！！