Asp.Net Core 項目實戰之權限管理系統（7） 組織機構、角色、用戶權限

0 Asp.Net Core 項目實戰之權限管理系統（0） 無中生有

1 Asp.Net Core 項目實戰之權限管理系統（1） 使用AdminLTE搭建前端

2 Asp.Net Core 項目實戰之權限管理系統（2） 功能及實體設計

3 Asp.Net Core 項目實戰之權限管理系統（3） 通過EntityFramework Core使用PostgreSQL

4 Asp.Net Core 項目實戰之權限管理系統（4） 依賴注入、倉儲、服務的多項目分層實現

5 Asp.Net Core 項目實戰之權限管理系統（5） 用戶登錄

6 Asp.Net Core 項目實戰之權限管理系統（6） 功能管理

7 Asp.Net Core 項目實戰之權限管理系統（7） 組織機構、角色、用戶權限

8 Asp.Net Core 項目實戰之權限管理系統（8） 功能菜單的動態加載

github源碼地址

前面已經完成項目基本框架搭建及功能菜單管理的具體功能實現，接下來要實現的組織機構管理、用戶管理、角色權限管理基本實現方法類似，基本實現步驟如下：

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.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支持多選，以及模糊篩選。界面效果如下：

3 總結

在基本框架的基礎上，功能實現並不復雜，到現在為止，四個主要的基本功能基本都已經實現了，里面會涉及一些細節性的問題，比如唯一性驗證、密碼加密等功能，沒有做過多處理。接下來就是要實現根據登錄用戶動態加載對應的功能菜單，以及功能操作權限的判斷。