layui如何设置菜单权限

1. 简介

layui是一款非常流行的基于jQuery的前端UI框架，它的轻量化和简单易用的特点深受广大开发者的喜爱。当我们在使用layui开发后台管理系统时，经常需要根据用户的不同角色来控制用户的操作权限，这时候我们就需要搭配layui的菜单进行权限控制。下面我们就来具体介绍layui如何设置菜单权限。

2. layui菜单结构

在layui中，菜单是通过navgation组件来实现的。我们可以通过以下代码来创建一个基本的菜单结构：

<div class="layui-side layui-bg-black">
  <div class="layui-side-scroll">
    <ul class="layui-nav layui-nav-tree"  lay-filter="test">
      <li class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;">管理中心
        <dl class="layui-nav-child">
          <dd><a href="/user/">用户管理</a></dd>
          <dd><a href="/category/">分类管理</a></dd>
          <dd><a href="/brand/">品牌管理</a></dd>
        </dl>
      </li>
    </ul>
  </div>
</div>

上述代码中，我们在div标签中加入了layui-side和layui-bg-black两个样式类，来定义侧边栏的外观和背景颜色。并且在ul标签中，我们加入了layui-nav和layui-nav-tree两个样式类，来定义菜单的外观和展开方式。在li标签中，我们加入了layui-nav-item和layui-nav-itemed两个样式类，来定义菜单项的选中状态。最后，在dl标签中，我们加入了layui-nav-child样式类，来定义子菜单项。

3. 菜单权限控制

3.1 需求分析

在实际开发中，我们经常需要根据用户的不同角色来控制其对菜单的访问权限。例如，管理员可以访问所有菜单，而普通用户只能访问部分菜单。为了实现这个功能，我们需要做如下几步：

根据用户的角色信息生成对应的菜单结构

在菜单加载后根据用户的权限信息对菜单进行过滤

3.2 菜单结构生成

要生成菜单结构，我们需要先获取当前用户的角色信息，并根据角色信息来生成对应的菜单结构。在layui中，我们可以通过以下代码来生成菜单结构：

// 获取当前用户的角色信息
var roleId = sessionStorage.getItem('roleId');
// 根据角色生成对应的菜单结构
var menuData = [...];
var menuHtml = getMenuHtml(menuData, roleId);
// 将生成的菜单结构渲染到页面上
$('.layui-nav').html(menuHtml);
// 生成菜单结构的方法
function getMenuHtml(menuData, roleId) {
  var html = '';
  for (var i = 0; i < menuData.length; i++) {
    var menu = menuData[i];
    if (menu.roles.indexOf(roleId) !== -1) {
      html += '<li class="layui-nav-item">';
      if (menu.children && menu.children.length > 0) {
        html += '<a href="javascript:;"><i class="layui-icon ' + menu.icon + '"></i>&nbsp; ' + menu.name + '</a>';
        html += '<dl class="layui-nav-child">' + getMenuHtml(menu.children, roleId) + '</dl>';
      } else {
        html += '<a href="' + menu.url + '"><i class="layui-icon ' + menu.icon + '"></i>&nbsp; ' + menu.name + '</a>';
      }
      html += '</li>';
    }
  }
  return html;
}

上述代码中，我们先通过sessionStorage获取当前用户的角色信息roleId，然后在menuData数组中定义了系统的所有菜单，并在roles属性中指定了哪些角色可以访问该菜单。接着，我们定义了getMenuHtml()方法，用来根据角色信息生成对应的菜单结构。最后，我们通过$('.layui-nav').html(menuHtml)方法将生成的菜单结构渲染到页面上。

3.3 菜单权限过滤

要在菜单加载后根据用户的权限信息对菜单进行过滤，我们需要先获取当前用户的权限信息，并遍历菜单结构来判断哪些菜单需要显示。在layui中，我们可以通过以下代码来实现：

// 获取当前用户的权限信息
var permissions = sessionStorage.getItem('permissions');
// 遍历菜单，根据权限进行过滤
$('.layui-nav-item').each(function() {
  var $li = $(this);
  var $a = $li.children('a');
  var url = $a.attr('href');
  if (url && url !== '#' && permissions.indexOf(url) === -1) {
    $li.remove();
  }
});

上述代码中，我们先通过sessionStorage获取当前用户的权限信息permissions，然后遍历所有layui-nav-item元素，判断其对应的链接是否在permissions中包含，如果不包含则将该菜单从菜单栏中移除。

4. 总结

通过以上的步骤，我们就能够很方便地实现layui菜单的权限控制。在实际开发中，我们还可以基于上述技术进一步扩展，例如将菜单数据和权限数据通过后台接口动态获取，或者将过滤后的菜单在页面上做成树形结构等等。