layui tree组件图标节点操作的权限问题

项目笔记二：

layui tree 组件 提供了可以直接在节点操作的功能，但是不能让无权限用户操作菜单，我们需要根据权限判断用户是否有操作其中某个或者某些功能的资格，如果没有直接隐藏这个小图标，关于权限的管理我用的是shiro+thymeleaf

1. （首先前台通过ajax进行主页面验证成功后将信息存入本地存储)

 success: (data) => {
                if (data.userId == -1) {
                    location.href = 'toLogin';
                } else {
                    console.log(data)
                    let userStr = JSON.stringify(data);//将JSON对象转换为字符串
                    localStorage.setItem('user', userStr)
                    $('#namex').text(data.username);
                }
            },

2.在菜单页面获取：

function init() {
        //从本地存储中获取内容
        let userStr = localStorage.getItem('user');
        //将字符串转换为JSON对象（数组）
        let data = JSON.parse(userStr)
        console.log('dataxx:', data)
        let ss = false;
        let power = new Set();
        $.each(data.role.menu, function (i, item) {
            if (contains(data.role.menu, 'menu:delete') == true) {
                power.add('del');
            }
            if (contains(data.role.menu, 'menu:update') == true) {
                power.add('update');
            }
        })
        if (power.length != 0) {
            return power
        } else {
            return false
        }
    }
    function contains(a, obj) {
        let i = a.length;
        while (i--) {
            if (a[i].perms == obj) {
                return true;
            }
        }
        return false;
    }

3.此处搬自layui官方文档
edit:
是否开启节点的操作图标。默认 false。
若为 true，则默认显示“改删”图标
若为 数组，则可自由配置操作图标的显示状态和顺序，目前支持的操作图标有：add、update、del，如：

edit: [‘add’, ‘update’, ‘del’]

4.我们将edit后面定义成动态参数let edit=false
逻辑代码

 layui.use(['tree', 'util', 'layer'], function () {
        let tree = layui.tree;
        let util = layui.util;
        let layer = layui.layer;
        let edit = false;
        edit = init()
        edit = [...edit];
        // console.log('edit:', edit);
        treeData(tree, edit, layer)
    })

2,4是一起的，首先遍历角色的所有菜单权限，在判断权限是否有操作节点的那个，有就存入Set中 最后init返回Set 重新赋值给edit,注意 需要数组所以将Set转换成数组：edit=[…edit],到此功能就已经实现了

 tree.render({
    elem: '#test1' //绑定元素
   , showCheckbox: true
    , id: 'demoId1'
    , showLine: true
    , data: data
    , edit: edit //操作节点的图标，根据权限生成相应图标
  });