需求分析

在做后台管理系统的时候，一定会有权限配置功能，为了比较人性化的解决这个需求，有一种处理办法是找一个 php 配置文件，配置好需要的数据类型，通过使用 element-ui 前端插件提供的树形控件，解决系统权限配置功能

所以就会产生这个需求，将 php 数组转化成 element-ui 的树形控件需要的数据结构，这样也有利于后续权限数据的维护和修改

配置文件数据

[
    '权限,成员管理,成员列表',
    '权限,成员管理,成员信息',
    '权限,角色管理,角色列表',
    '权限,角色管理,角色信息',
    '权限,角色管理,成员信息',
]

element-ui 树形控件数据

在使用树形控件时，将 key 值作来作为唯一标识的属性

[
    {
        "label": "权限",
        "parent": "",
        "key": "权限,",
        "children": [
            {
                "label": "成员管理",
                "parent": "权限,",
                "key": "权限,成员管理,",
                "children": [
                    {
                        "label": "成员列表",
                        "parent": "权限,成员管理,",
                        "key": "权限,成员管理,成员列表,"
                    },
                    {
                        "label": "成员信息",
                        "parent": "权限,成员管理,",
                        "key": "权限,成员管理,成员信息,"
                    }
                ]
            },
            {
                "label": "角色管理",
                "parent": "权限,",
                "key": "权限,角色管理,",
                "children": [
                    {
                        "label": "角色列表",
                        "parent": "权限,角色管理,",
                        "key": "权限,角色管理,角色列表,"
                    },
                    {
                        "label": "角色信息",
                        "parent": "权限,角色管理,",
                        "key": "权限,角色管理,角色信息,"
                    }
                ]
            }
        ]
    }
]

将 php 数据转化为类似数据库记录的形式

$result = [];
$have = []; // 标志数组，防止重复
foreach ( $data as $menu )
{
    $tempStr = '';
    foreach ( explode(',',$menu) as $m )
    {
        $key = $tempStr . $m . ',';
        if ( ! in_array( $key , $have ) )
        {
            $result[] = [
                'label' => $m,
                'parent' => $tempStr,
                'key' =>  $key,
            ];
            $have[] = $key;
        }
        $tempStr .= $m.',';
    }
}

这样得到的 result 数据类型如下：

[
    {
        "label": "权限",
        "parent": "",
        "key": "权限,"
    },
    {
        "label": "成员管理",
        "parent": "权限,",
        "key": "权限,成员管理,"
    },
    {
        "label": "成员列表",
        "parent": "权限,成员管理,",
        "key": "权限,成员管理,成员列表,"
    },
    {
        "label": "成员信息",
        "parent": "权限,成员管理,",
        "key": "权限,成员管理,成员信息,"
    },
    {
        "label": "角色管理",
        "parent": "权限,",
        "key": "权限,角色管理,"
    },
    {
        "label": "角色列表",
        "parent": "权限,角色管理,",
        "key": "权限,角色管理,角色列表,"
    },
    {
        "label": "角色信息",
        "parent": "权限,角色管理,",
        "key": "权限,角色管理,角色信息,"
    },
    {
        "label": "成员信息",
        "parent": "权限,角色管理,",
        "key": "权限,角色管理,成员信息,"
    }
]

将上边 result 的结构转化为最终需要的结构

$data = array_column($result, null, 'key');
$tree = [];
foreach ($data as $key => $val) {
    if ($val['parent'] == '') {
        $tree[] = &$data[$key];
    } else {
        $data[$val['parent']]['children'][] = &$data[$key];
    }
}

这块代码很少，但是并不好理解，需要充分理解 php 数组值传递的概念

最终的权限页面

整个管理系统权限实现逻辑

• 将权限绑定到系统角色中，当然按照需求每个用户可以设置多个角色
• 利用 element 提供的 getCheckedKeys(true) 获取值得到叶子节点的 key，保存到数据库中
• 在打开对应链接是，判断用户所就有的所有角色中是否有对应的权限

总结

至此，该需求就得到完美的解决，用户可以通过树形控件提供的界面，去配置不同角色的权限

感谢

之前一直在整理转换方法，无意中看到 学习扩展包的开发到发布 文章中的实现方法

本作品采用《CC 协议》，转载必须注明作者和本文链接