shiro最简洁的权限管理(菜单)控制

主要是思想,步骤的话,还是需要分不同的场景,有什么问题及时留言评论即可。

生活中常见的管理系统中,都会有权限的控制,让不同类型的登录用户看到不同的菜单。其实,类似于uasyui这样的前端框架,是有提供成熟的解决方案的,但是不够灵活。在某一次的开发过程中,楼主终于忍受不了了,决定自己写。其逻辑并不复杂,直接上代码。

1.先看一下效果图,有父级菜单,有子级菜单。数据库需要5个表。user表,role表,menu表,role_menu表,user_role表

下面贴出最简单的表结构(依次)。

role_menu 表 和user_role表 是两个关联表。

2.下面贴出查询语句

SELECT * FROM key_menu m WHERE m.id IN(
            SELECT rm.menuid  FROM key_role_menu  rm  WHERE rm.roleid = (
                  SELECT ur.roleid  FROM key_user_role ur WHERE ur.userid = 1 )) order BY id

注意:上述语句中的userid是写死得,只是为了测试,实际开发中需要动态传入。

3.前台操作

  查出来的数据通过json发送给前端,前端拿到一个这样的数据

很熟悉的json数据,所以前端需要通过循环遍历,把内容放到页面上,注意,这条数据中有父菜单,有子菜单,所以前端的工作还是得稍微费点功夫。下边贴出我的代码和逻辑。

复制代码

$.ajax( {
        url : basepath+'/menu/selectMenu.do',
        type : 'post',
        dataType : 'json',
        success : function(data) {
            console.log(data.result);
            var result = data.result;
            var menu = ""; //定义变量存储
            for(var i = 0;i<result.length;i++){
                menu += "<li class='layui-nav-item'>"
                if(result[i].parentid == 0){ //取出父元素的菜单,拼进页面
                    menu +=        "<a href='#'>"+result[i].menuname+"</a>"
                    for(var j = 0;j<result.length;j++){ //继续遍历这几条数据
                        if(result[j].id > result[i].id && result[j].id < (result[i].id)+10){ //取出这个父元素所对应的子元素
                            menu +=    "<dl class='layui-nav-child'>"
                            menu +=        "<dd>"
                            menu +=            "<a class='menuitem' mid='"+result[j].id+"' murl='"+result[j].url+"' href='#'>"+result[j].menuname+"</a>"
                            menu +=        "</dd>"
                            menu +=    "</dl>"
                        }
                    }
                }
                menu +=    "</li>";
            }
            $("#nav").html(menu);
            element.init();         
        }
    });

复制代码

 完成这一步之后,基本上就完成了!

猜你喜欢

转载自blog.csdn.net/AinUser/article/details/81900998