• 热门专题

Asp.Net Core 项目实战之权限管理系统(7) 组织机构 角色 用户权限

作者:Fonour  发布日期:2016-12-26 20:22:43
Tag标签:权限  组织机构  实战  
  •  

    github源码地址  https://github.com/Fonour/Fonour

    前面已经完成项目基本框架搭建及功能菜单管理的具体功能实现,接下来要实现的组织机构管理、用户管理、角色权限管理基本实现方法类似,基本实现步骤如下:

    0 仓储接口定义

    在Fonour.Domain项目的IRepositories文件夹下创建继承自泛型接口IRepository<T>的仓储接口,根据实际情况进行接口扩展。

    1 仓储操作实现

    在Fonour.EntityFrameworkCore项目的Repositories文件夹下对上面定义的接口进行实现

    2 定义Dto及创建与实体的映射关系

    在Fonour.Application项目中按照功能管理的实现方式,创建对应的Dto类,同时在FonourMapper.cs中增加创建的Dto与具体的实体之间映射关系。

    3 定义服务接口及实现

    在Fonour.Application中按照实际需要定义应用服务接口及对应实现。

    4 创建Controller,实现Action

    在Fonour.MVC项目中增加对应业务功能的控制器,以及对应操作的Action。

    5 前端操作实现

    使用AdminLTE,结合ajax操作实现前端相关。

    上述操作,可结合代码生成器进行自动生成,会大大增加开发效率。

    0 组织机构管理

    组织机构管理与功能管理非常类似,都是简单的单表增删改查操作,在界面布局上也一样,左侧为组织机构树,右侧为选中节点对应的子级组织机构列表。同样包含新增顶级、新增、删除、编辑等操作。只需要按照上面介绍的实现步骤,逐步去实现即可,最终效果如下:

    1

    1 角色管理

    页面布局设计为,左侧为角色列表,右侧为功能树,单击左侧角色列表时,对已经关联的功能进行勾选显示;同时可在右侧直接修改选中项,对当前角色进行功能权限的调整。

    1

    1.0 列表选中事件添加

    没有使用table插件,简单的对选中的tr增加click事件处理,单击的tr进行颜色改变,同时清除非选中tr的背景色,事件中捕获到当前选中行的id,进行根据角色id显示对应功能权限的处理。

    $('table > tbody > tr').click(function () {
        $('table > tbody > tr').removeAttr('style')
        $(this).attr('style', 'background-color:#beebff');
        selectedRole = $(this).find('input').val();
        loadPermissionByRole(selectedRole);
    });
    //根据选中角色加载功能权限
    function loadPermissionByRole(selectedRole) {
        $.ajax({
            type: 'Get',
            url: '/Role/GetMenusByRole?roleId=' + selectedRole + '&_t=' + new Date().getTime(),
            success: function (data) {
                $('#treeDiv').find('li').each(function () {
                    $('#treeDiv').jstree('uncheck_node', $(this));
                    if (data.indexOf($(this).attr('id')) != -1) {
                        $('#treeDiv').jstree('check_node', $(this));
                    }
                })
            }
        });
    };

    2 用户管理

    用户管理中,需要对用户进行角色分配,一个用户可以拥有多个角色。角色多选这里使用了select2插件,可以直接通过Bower管理器添加select2的依赖引用,添加后发现样式与现有框架中的样式不太协调,没有再进行调整,直接使用了我以前修改过的select2。

    2.0 使用select2

    将selcet2文件夹放至Fonour.MVC项目的/wwwroot/lib/文件夹下,修改布局页_Layout.cshtml的内容,增加对select2.css、select2.js、以及中文配置的引用。

    <link rel='stylesheet' href='~/lib/select2/select2.css'>
    <script src='~/lib/select2/select2.js'></script>
    <script src='~/lib/select2/select2_locale_zh-CN.js'></script>

    select2加载数据

    界面元素增加multiple='multiple'属性,让select2支持多选操作。

    <div class='form-group'>
        <label class='col-sm-2 control-label' for=''>所属角色</label>
        <div class='col-sm-10'>
            <select id='Role' class='form-control' style='padding:0px' multiple='multiple'>
            </select>
        </div>
    </div>

    调用select2()方法,创建select2界面元素;通过ajax请求返回角色列表json对象,将角色信息通过option标签绑定到select2控件。

    function loadRoles(data) {
        $('#Role').select2();
        var option = '';
        $.each(data.roles, function (i, item) {
            option += '<option value='' + item.id + ''>' + item.name + '</option>'
        })
        $('#Role').html(option);
    }

    select2支持多选,以及模糊筛选。界面效果如下:

    0

    1

    3 总结

    在基本框架的基础上,功能实现并不复杂,到现在为止,四个主要的基本功能基本都已经实现了,里面会涉及一些细节性的问题,比如唯一性验证、密码加密等功能,没有做过多处理。接下来就是要实现根据登录用户动态加载对应的功能菜单,以及功能操作权限的判断。

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规