vue+springboot实现动态加载菜单栏

实现思路：数据库中有菜单表，角色表，用户表，角色和用户映射的表，菜单和角色映射的表五个表，springboot利用jpa操作数据库，提供vue前端获取这些表中的数据，vue前端利用懒加载，对当前登录的用户的角色所拥有的菜单栏进行显示和渲染。
本文参考Evan-Nightly写的"Vue + Spring Boot 项目实战"系列的文章，他那个系列教程写得很棒，我吹爆。后期进阶的部分详细步骤这位老哥没放出来，我这里稍微总结一下，方便基础不好的老哥，也算是给自己查漏补缺。
具体实现：
首先来看菜单表的内容：

这里跳过springboot的操作直接看前端的部分会方便理解一点，我们用vuex存储菜单表的数据，在store/index.js里面定义菜单表的变量，以及该变量的set方法，如下图所示。

这样前端姑且就有了存储每个用户对应角色的菜单数据变量了。接下来看看这个变量从哪被赋值以及具体的数据结构。
前端vue有个router控制路径的跳转，router有个自带的beforeEach方法，在这里面写函数，可以实现一些在路径跳转前的验证逻辑，这些方法都在main.js里写，这里的任务是发送请求给后端，得到菜单栏的数据，然后转一下格式，再调用上面store/index.js定义的set方法，把菜单数据存到前端上去。
在main.js里面写函数，上面的是发请求，下面的是转格式：

const initAdminMenu = (router, store) => {
   
  // 防止重复触发加载菜单操作
  if (store.state.adminMenus.length > 0) {
   
    return
  }
  Axios.get('http://127.0.0.1:8088/api/menu').then(resp => {
   
    if (resp && resp.status === 200) {
   
      //console.log(resp.data.result)
      //console.log(resp.data)
      var fmtRoutes = formatRoutes(resp.data)

      console.log("initmenu......")
      console.log(fmtRoutes)
      router.addRoutes(fmtRoutes