前后端分离，基于vue+elementUI的动态菜单

制作动态菜单的思路：

就是当前用户登陆后，保存用户的信息，通过用户的id，去查找该用户对象的菜单。后台获取的菜单数据，最终传给前台形式就是父菜单里包含了所有的子菜单；并在前台登录成功后，把菜单数据取出来，保存在sessionStorage（相当于后端的session）中。这里由于是用的前后端分离模式，所以先在前端的routes.js路由文件中，存着系统所有的菜单，在Home.vue文件中，通过循环比较来展示该用户的菜单。

代码就直接分享核心部分：

service实现层：

这里我可能获取菜单有点复杂，仅供参考。

 @Override
    public List findMenus() {
        //父菜单容器
        List parentList = new ArrayList<>();
//        //查找得到所有菜单
        User user = UserContext.getUser();
        List menus = systemMenuMapper.findByUserid(user.getId());
        boolean falg = true;
        for (SystemMenu menu : menus) {
            SystemMenu parentMenu = systemMenuMapper.findParentByChild(menu.getId());
            if(parentList.size()!=0) {
                for (SystemMenu systemMenu : parentList) {
                    if (systemMenu.getName().equals(parentMenu.getName())) {  //同一个父级菜单
                        systemMenu.getChildren().add(menu);  //就向里面添加
                        falg = false;
                        break;
                    } else {
                        falg = true;
                    }
                }
            }
            if(falg){
                parentList.add(parentMenu);
                falg = false;
            }
            parentMenu.getChildren().add(menu);
        }
        return parentList;
    }

mapper层

 
    
        SELECT DISTINCT m.id ,m.`name`
        FROM t_systemmenu m
        LEFT JOIN t_permission p ON m.id=p.menu_id
        LEFT JOIN t_role_permission rp ON rp.permission_id=p.id
        LEFT JOIN t_role r ON r.id=rp.role_id
        LEFT JOIN t_user_role ur ON ur.role_id=r.id
        LEFT JOIN t_user u ON u.id=ur.user_id
        WHERE u.id=#{id}
    

    
        SELECT id,name FROM t_systemmenu where id=(SELECT parent_id FROM t_systemmenu WHERE id=#{id})
    

前端登录成功后，执行的函数中保存数据

    this.$http.post("/login",loginParams).then(data=>{
                this.logining = false;
                //NProgress.done();
                  //解构表达式
                  let {msg, success,object} = data.data;
                  // console.debug(object.object.menuList)
                  //保存当前用户能看到的所有菜单
                  sessionStorage.setItem('menus', JSON.stringify(object.object.menuList));
                if (!success) { //登录不成功
                  this.$message({message: msg, type: 'error'});
                } else {
                    sessionStorage.setItem('user', JSON.stringify(object.object));//存储当前登录人的对象
                    //存储sessionId
                    sessionStorage.setItem('sessionId', object.sessionId);
                    //简单理解就是跳转界面
                    this.$router.push({ path: '/echarts' });
                }
            });

由于前端用的是基于vue的脚手架和lementUI，所有展示菜单，需要循环遍历。代码如下：

				

					

						
						
					
				


data() {
			return {
				menus:[] //当前登录用户所能看到的菜单
			}
		},

mounted() {
			var user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.sysUserName = user.name || '';
				// this.sysUserAvatar = user.avatar || '';  avatar//图片路径
			}
			////取出当前用户能看到的所有菜单,并赋值
            let item = sessionStorage.getItem("menus");
            this.menus = JSON.parse(item);
		}