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 總結

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