星空2020 2023-08-26 19:44 采纳率: 64.1%
浏览 6
已结题

layui+php后台如何根据权限显示左侧动态菜单?

layui前台显示+PHP后台数据,在用户登录时根据权限让左侧树形菜单动态显示。
如超级管理员显示所有菜单,管理员显示edit的菜单,游客只显示list及page类主页。
mysql权限表:t_auth_user,t_auth_role,t_auth_node,t_auth_role_node
如何根据登录session值来动态输出不同权限的菜单?
1,超级管理员显示所有菜单;
2,管理员显示三个;
3,游客显示两个菜单:如

 <!-- 左侧菜单开始 -->
        <div class="left-nav">
            <div id="side-nav">
                <ul id="nav"> 
                    <li>
                        <a href="javascript:;">
                            <i class="iconfont left-nav-li" lay-tips="区域管理" style="color:blue;">&#xe74a;</i>
                            <cite>区域管理</cite>
                            <i class="iconfont nav_right">&#xe697;</i></a>
                        <ul class="sub-menu">
                            <li>
                                <a onclick="xadmin.add_tab('区域主页','./area/area_page.php')">
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>区域主页</cite></a>
                            </li>
                        </ul>
                    </li>
                    
                     <li>
                        <a href="javascript:;">
                            <i class="iconfont left-nav-li" lay-tips="文章管理" style="color:blue;">&#xe6b2;</i>
                            <cite>文章管理</cite>
                            <i class="iconfont nav_right">&#xe697;</i></a>
                        <ul class="sub-menu">
                        <li>
                                <a onclick="xadmin.add_tab('我的文章','./wenzhang/wenzhang_list.php')">
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>我的文章</cite></a>
                            </li>
                        </ul>
                    </li>            
                </ul>
            </div>
        </div> 
        <!-- 左侧菜单结束 -->

原完整前台:

<?php
require_once dirname(__FILE__).'/common.php';
session_start();
$aa = $_SESSION['name'];
$bb = $_SESSION['avatar'];
$cc = $_SESSION['userid'];


header("content-type:text/html; charset=utf-8");
// 验证Session

?>

<!doctype html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>PCBA Repair SystemV2.2</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <link rel="stylesheet" href="./css/theme6.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <script type="text/javascript" src="./js/jquery.min.js"></script>
    </script>
    </head>
    <body class="index">
            <!-- 顶部开始 -->
        <div class="container">
            <div class="logo">
                <a href="./ais.php">PCBA Repair SystemV2.2</a>
            </div>
            <div class="left_open">
                <a><i title="展开左侧栏" class="iconfont">&#xe699;</i></a>                
            </div>

            <div class="left_fullscreen">
                <a>
                <i title="全屏显示" class="layui-icon layui-icon-screen-full" style="color: #eeeeee;" onclick="showFullScreen()" id="mainBtn"></i>
                <i title="退出全屏" class="layui-icon layui-icon-screen-restore" style=" color: #eeeeee;" onclick="closeFullScreen()" id="notFullScreen"></i></a>            
            </div>
            
            <div class="left_chart_fullscreen">
                <a>
                <i title="Repair DataCenter" class="layui-icon layui-icon-chart-screen" style="color: #eeeeee;" id="firsrBtn"></i></a>            
            </div>
            <iframe id="first-iframe"  src="./kanban/index.php" style="width:0;height:0;border:0; border:none;"></iframe>
          <ul class="layui-nav right" lay-filter="">
                <li class="layui-nav-item">
                  <a href="javascript:;"><img src="<?php echo $bb ?>" class="layui-nav-img"  onclick="photograph(this)"></a>
                 </li>
                <li class="layui-nav-item">
                <!-- <img src="./user_picture/{{d.sample_picture}}" style="cursor: pointer; width:50px"  onclick="photograph(this)"/>-->
                    <a href="javascript:;"><?php echo $aa ?></a>
                    <dl class="layui-nav-child">
                        <!-- 二级菜单 -->
                        <dd>
                            <a onclick="xadmin.open('个人信息','./user',350,400)">个人信息</a></dd>
                        <dd class="close-all" data-type="closeall">
                           <a href="exit" onclick="return confirm('确定退出吗?');">退出</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item to-index">
                    <a href="/">前台首页</a></li>
            </ul>
        </div>
        <!-- 顶部结束 -->
    
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
            <div id="side-nav">
                <ul id="nav"> 
                    <li>
                        <a href="javascript:;">
                            <i class="iconfont left-nav-li" lay-tips="区域管理" style="color:blue;">&#xe74a;</i>
                            <cite>区域管理</cite>
                            <i class="iconfont nav_right">&#xe697;</i></a>
                        <ul class="sub-menu">
                            <li>
                                <a onclick="xadmin.add_tab('区域主页','./area/area_page.php')">
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>区域主页</cite></a>
                            </li>
                            <li>
                                <a onclick="xadmin.add_tab('区域商品','./area/goods_list.php')">
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>区域商品</cite></a>
                            </li>
                            <li>
                                <a onclick="xadmin.add_tab('商品属性','./area/goods_list_edit.php')">
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>商品属性</cite></a>
                            </li>                            
                            <li>
                        </ul>
                    </li>
                    
                     <li>
                        <a href="javascript:;">
                            <i class="iconfont left-nav-li" lay-tips="文章管理" style="color:blue;">&#xe6b2;</i>
                            <cite>文章管理</cite>
                            <i class="iconfont nav_right">&#xe697;</i></a>
                        <ul class="sub-menu">
                        <li>
                                <a onclick="xadmin.add_tab('我的文章','./wenzhang/wenzhang_list.php')">
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>我的文章</cite></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <i class="iconfont left-nav-li" lay-tips="我的论坛" style="color:blue;">&#xe70e;</i>
                            <cite>我的论坛</cite>
                            <i class="iconfont nav_right">&#xe697;</i></a>
                        <ul class="sub-menu">
                        <li>
                                <a onclick="xadmin.add_tab('论坛管理','./luntan/luntan.php')">
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>论坛管理</cite></a>
                            </li>
                            <li>
                                <a onclick="xadmin.add_tab('论坛编辑','./luntan/luntan_edit.php')">
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>论坛编辑</cite></a>
                            </li>
                        </ul>
                    </li>                
                </ul>
            </div>
        </div> 
        <!-- 左侧菜单结束 -->



        
        <!-- 右侧主体开始 -->
        <div class="page-content">
            <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
                <ul class="layui-tab-title">
                    <li class="home">
                        <i class="layui-icon">&#xe68e;</i>主页</li></ul>
                <div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
                    <dl>
                        <dd data-type="this">关闭当前</dd>
                        <dd data-type="other">关闭其它</dd>
                        <dd data-type="all">关闭全部</dd></dl>
                </div>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <iframe src='./welcome.php' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
                    </div>
                </div>
                <div id="tab_show"></div>
            </div>
        </div>
        <div class="page-content-bg"></div>
        <style id="theme_style"></style>
        <!-- 右侧主体结束 -->

  <script>
        layui.use('element',function(){
        var $ = layui.jquery;
        var element = layui.element;//Tab的切换功能,切换事件监听等,需要依赖element模块
        var layer = layui.layer;
        var active = {
        //在这里给active绑定事件,后面可通过active调用这些事件
            tabDeleteAll:function(ids){//删除所有
                $.each(ids,function(i,item){
                    element.tabDelete("xbs_tab",item);//ids是一个数组,里面存放了多个id,调用tabDelete方法分别删除
                })
            }
        };

        $(".close-all").click(function () {
            if ($(this).attr("data-type") == "closeall") {
                var tabtitle = $(".layui-tab-title li");
                var ids = new Array();
                $.each(tabtitle, function (i) {
                    ids[i] = $(this).attr("lay-id");
                });
                active.tabDeleteAll(ids);
                sessionStorage.clear();
                localStorage.clear();
            }
        
        })
    });
    </script>


<script src="./test.js"></script>
<script>
var doc = window.document;
        var btn = document.getElementById('mainBtn');
        initEvent(doc,btn);

    var iframe = window.top.document.getElementById("first-iframe");
    var firsrBtn = document.getElementById('firsrBtn');
    var iframeDoc = window.top.document.getElementById("first-iframe")["contentWindow"].document;
    initIframeEvent(iframe, firsrBtn);

    // iframe伸缩事件|前提是iframe是自适应的(通过css设置vh/vw)
    window.top.document.getElementById("first-iframe")["contentWindow"].addEventListener("resize", (e) => {
        console.log("Trigger resize event,current iframe height is " + iframeDoc.body.clientHeight + " and width is " + iframeDoc.body.clientWidth)
    })
</script>
</body>
</html>


目前mysql权限表设计如下:


```sql
-------
CREATE TABLE `t_auth_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '自增ID',
  `root` tinyint(1) NOT NULL DEFAULT '0' COMMENT '0-非超级管理员;1-超级管理;',
  `name` varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '0' COMMENT '名称',
  `account` varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '' COMMENT '账号',
  `password` varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '密码',
  `salt` varchar(8) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '' COMMENT '密码盐',
  `create_time` int(10) NOT NULL COMMENT '创建时间',
  `update_time` int(10) NOT NULL COMMENT '修改时间',
  `login_time` int(10) DEFAULT NULL COMMENT '最后登录时间',
  `login_ip` varchar(15) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT '' COMMENT '最后登录ip',
  `disable` tinyint(1) NOT NULL DEFAULT '0' COMMENT '是否禁用:0-否;1-是;',
  `delete_time` int(11) NOT NULL DEFAULT '0' COMMENT '0为非删除状态,非0位删除时间',
  `login_address` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '登录详细地址',
  `role_id` int(11) NOT NULL DEFAULT '0' COMMENT '角色ID',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=MyISAM AUTO_INCREMENT=14 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci ROW_FORMAT=DYNAMIC COMMENT='后台管理员表';

CREATE TABLE `t_auth_role` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '自增ID',
  `name` varchar(25) NOT NULL COMMENT '角色名称',
  `auth_ids` text COMMENT '权限ID',
  `desc` varchar(255) DEFAULT NULL COMMENT '描述',
  `sort` smallint(6) NOT NULL DEFAULT '50' COMMENT '排序',
  `status` tinyint(1) NOT NULL DEFAULT '0' COMMENT '显隐:0:显示;1:隐藏',
  `create_time` int(10) DEFAULT NULL COMMENT '创建时间',
  `update_time` int(10) DEFAULT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='角色表';

CREATE TABLE `t_auth_node` (
  `id` int(4) unsigned zerofill NOT NULL AUTO_INCREMENT COMMENT '自增ID',
  `pid` int(4) NOT NULL DEFAULT '0' COMMENT '父级ID',
  `name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '名称',
  `icon` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '图标',
  `url` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT '' COMMENT '路由规则',
  `type` tinyint(1) NOT NULL DEFAULT '1' COMMENT '类型:\r\n1:菜单\r\n2:按钮',
  `sort` int(4) DEFAULT '50' COMMENT '排序',
  `create_time` int(10) DEFAULT NULL COMMENT '创建时间',
  `update_time` int(10) DEFAULT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='菜单节点表';


CREATE TABLE `t_auth_role_node` (
  `role_id` int(11) NOT NULL COMMENT '角色ID',
  `node_id` int(11) NOT NULL COMMENT '权限ID',
  PRIMARY KEY (`role_id`,`node_id`) USING BTREE
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='角色权限关系表';

```

  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-08-26 23:01
    关注

    【以下回答由 GPT 生成】

    根据您的问题描述,您希望根据用户的权限来动态显示左侧的菜单。您已经建立了一个包含用户、角色、权限节点以及角色和权限节点之间关联的数据库表。

    要实现这个功能,您可以按照以下步骤进行操作:

    1. 在登录时,将用户的权限信息存储在session中。您可以从数据库中查询用户的角色以及角色对应的权限节点。

    ```php // 在登录验证通过后,从数据库中查询用户的角色和权限节点

    // 查询用户的角色 $roles = queryUserRoles($userId);

    // 查询角色对应的权限节点 $nodes = array(); foreach ($roles as $role) { $roleNodes = queryRoleNodes($role); $nodes = array_merge($nodes, $roleNodes); }

    // 将权限节点信息存储在session中 $_SESSION['nodes'] = $nodes; ```

    1. 在前端页面中,根据用户的权限节点渲染菜单。您可以使用layui的JavaScript代码来动态生成菜单。

    ```javascript // 从session中获取用户的权限节点 var nodes = <?php echo json_encode($_SESSION['nodes']); ?>;

    // 根据权限节点渲染菜单 var menuHtml = ''; for (var i = 0; i < nodes.length; i++) { var node = nodes[i]; menuHtml += '

    // 将菜单插入到指定的元素中 $('#nav').html(menuHtml); ```

    在上述代码中,假设您已经从数据库中获取了用户的权限节点信息,其中每个节点对象包含了属性urliconname,分别表示菜单项的链接地址、图标和标题。

    这样,根据用户的权限节点,页面会动态生成对应的菜单项。不同的用户将看到不同的菜单项,达到了根据权限显示不同的菜单的目的。


    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 12月4日
  • 创建了问题 8月26日

悬赏问题

  • ¥200 csgo2的viewmatrix值是否还有别的获取方式
  • ¥15 Stable Diffusion,用Ebsynth utility在视频选帧图重绘,第一步报错,蒙版和帧图没法生成,怎么处理啊
  • ¥15 请把下列每一行代码完整地读懂并注释出来
  • ¥15 pycharm运行main文件,显示没有conda环境
  • ¥15 易优eyoucms关于二级栏目调用的问题
  • ¥15 寻找公式识别开发,自动识别整页文档、图像公式的软件
  • ¥15 为什么eclipse不能再下载了?
  • ¥15 编辑cmake lists 明明写了project项目名,但是还是报错怎么回事
  • ¥15 关于#计算机视觉#的问题:求一份高质量桥梁多病害数据集
  • ¥15 特定网页无法访问,已排除网页问题