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;"></i>
<cite>区域管理</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('区域主页','./area/area_page.php')">
<i class="iconfont"></i>
<cite>区域主页</cite></a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont left-nav-li" lay-tips="文章管理" style="color:blue;"></i>
<cite>文章管理</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('我的文章','./wenzhang/wenzhang_list.php')">
<i class="iconfont"></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"></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;"></i>
<cite>区域管理</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('区域主页','./area/area_page.php')">
<i class="iconfont"></i>
<cite>区域主页</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('区域商品','./area/goods_list.php')">
<i class="iconfont"></i>
<cite>区域商品</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('商品属性','./area/goods_list_edit.php')">
<i class="iconfont"></i>
<cite>商品属性</cite></a>
</li>
<li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont left-nav-li" lay-tips="文章管理" style="color:blue;"></i>
<cite>文章管理</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('我的文章','./wenzhang/wenzhang_list.php')">
<i class="iconfont"></i>
<cite>我的文章</cite></a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont left-nav-li" lay-tips="我的论坛" style="color:blue;"></i>
<cite>我的论坛</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('论坛管理','./luntan/luntan.php')">
<i class="iconfont"></i>
<cite>论坛管理</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('论坛编辑','./luntan/luntan_edit.php')">
<i class="iconfont"></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"></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='角色权限关系表';
```
【以下回答由 GPT 生成】
根据您的问题描述，您希望根据用户的权限来动态显示左侧的菜单。您已经建立了一个包含用户、角色、权限节点以及角色和权限节点之间关联的数据库表。
要实现这个功能，您可以按照以下步骤进行操作：
```php // 在登录验证通过后，从数据库中查询用户的角色和权限节点
// 查询用户的角色 $roles = queryUserRoles($userId);
// 查询角色对应的权限节点 $nodes = array(); foreach ($roles as $role) { $roleNodes = queryRoleNodes($role); $nodes = array_merge($nodes, $roleNodes); }
// 将权限节点信息存储在session中 $_SESSION['nodes'] = $nodes; ```
```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); ```
在上述代码中，假设您已经从数据库中获取了用户的权限节点信息，其中每个节点对象包含了属性url、icon和name，分别表示菜单项的链接地址、图标和标题。
这样，根据用户的权限节点，页面会动态生成对应的菜单项。不同的用户将看到不同的菜单项，达到了根据权限显示不同的菜单的目的。