ASP.NET Identity “角色-权限”管理 10

1.1.       Ignite Grid展示数据

Ignite UI提供了基于HTML5与CSS3的控件,需要添加程序集引用Infragistics.Web.Mvc,相应的CSS与JS,该框架需要JQuery UI、Bootstrap和modernizr。

1.1.1.      修改BundleConfig

Ignite所需的css与js引用,统一放在BundleConfig中配置。


//jquery-ui

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(

"~/Scripts/jquery-ui-{version}.js"

));

//<!-- Ignite UI Required Combined CSS Files -->

bundles.Add(new StyleBundle("~/IgniteUI/css").Include(

"~/igniteui/css/themes/infragistics/infragistics.theme.css",

"~/igniteui/css/structure/infragistics.css"

));

//<!-- Ignite UI Required Combined JavaScript Files -->

bundles.Add(new ScriptBundle("~/IgniteUI/js").Include(

"~/igniteui/js/infragistics.core.js",

"~/igniteui/js/infragistics.dv.js",

"~/igniteui/js/infragistics.loader.js",

"~/igniteui/js/infragistics.lob.js"

));

1.1.2.      修改cshtml

为提高效率,应先加载css,后加载js,所以js添加到文件底部。


@Styles.Render("~/IgniteUI/css")

省略页面代码…

@Scripts.Render("~/bundles/jqueryui")

@Scripts.Render("~/IgniteUI/js")

1.1.3.      Action添加特性

Action添加特性GridDataSourceAction,返回类型为IQueryable,


[GridDataSourceAction]

public async Task<ActionResult> Create(string roleId)

{

if (string.IsNullOrWhiteSpace(roleId))

{

return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

}

var roles = _roleManager.Roles.ToList();

ViewBag.RoleID = new SelectList(roles, "ID", "Description", roleId);

//取角色权限ID

var rolePermissions = await _roleManager.GetRolePermissionsAsync(roleId);

//取全部权限与角色权限的差集

var allPermission = _db.Permissions.ToList();

var permissions = allPermission.Except(rolePermissions);

//创建ViewModel

var permissionViews = new List<PermissionViewModel>();

var map = Mapper.CreateMap<ApplicationPermission, PermissionViewModel>();

permissions.Each(t =>

{

var view = Mapper.Map<PermissionViewModel>(t);

permissionViews.Add(view);

});

//排序

permissionViews.Sort(new PermissionViewModelComparer());

return View(permissionViews.AsQueryable());

}

1.1.4.      修改视图

Ignite UI提供两种方式JS与HTML Helper,model需要声明为IQueryable,示例代码为后者。


@using Infragistics.Web.Mvc

@Styles.Render("~/IgniteUI/css")

@model IQueryable<AspNetIdentity2Permission.Mvc.Models.PermissionViewModel>

<div class="form-group">

<div class="col-md-10">

@(Html.Infragistics()

.Grid(Model)

.ID("Grid")

.Height("500px")

.Width("100%")

.AutoGenerateColumns(false)

.AutoGenerateLayouts(false)

.RenderCheckboxes(true)

.PrimaryKey("Id")

.Columns(column =>

{

column.For(x => x.Id).Hidden(true);

column.For(x => x.Action).HeaderText("Action名称");

column.For(x => x.Controller).HeaderText("Controller名称");

column.For(x => x.Description).HeaderText("功能说明");

})

.Features(feature =>

{

feature.Selection().Mode(SelectionMode.Row).MultipleSelection(true);

feature.RowSelectors().EnableRowNumbering(true).EnableCheckBoxes(true);

feature.Sorting();

feature.Paging().PageSize(10)

.FirstPageLabelText("第一页")

.LastPageLabelText("最后一页")

.NextPageLabelText("下一页")

.PageSizeDropDownLabel("每页记录数")

.PrevPageLabelText("前一页");

})

//.DataSourceUrl(Url.Action("GetPermissions"))

.DataBind()

.Render()

)

</div>

</div>

1.1.5.      运行效果

1.2.       JQuery与Action交互

取IgGrid选中的数据项,封装后用Post发送给Action。

1.2.1.      JQuery操作数据

JQuery使用$("#Grid")取Id名为Grid的DOM,$("#RoleID").val()取Id值为RoleID的DOM元素值,$.post(url, data, callback)发起Ajax请求提交数据,callback方法处理回调数据。


<script>

function getRowsInfo() {

var selectedRows = $("#Grid").igGridSelection("selectedRows"), data = [], cellVal;

if (selectedRows.length == 0) {

alert("请选择记录");

return false;

}

//取roleID

var roleId = $("#RoleID").val();

//取token

var token = $("input[name=‘__RequestVerificationToken‘]").val();

//取列数据

gridColumns = $("#Grid").igGrid("option", "columns");

for (j = 0; j < selectedRows.length; j++) {

var row = selectedRows[j];

var rowData = {};

//取单元格

for (i = 0; i < gridColumns.length; i++) {

cellVal = $("#Grid").igGrid("getCellValue", row.id, gridColumns[i].key);

rowData[gridColumns[i].key] = cellVal;

}

data[j] = rowData;

}

//提交服务端保存

$.post("/RolePermissions/Create",

{

"__RequestVerificationToken": token,

"roleId": roleId,

"data": data

},

function (result) {

if (result.Success) {

//跳转到Index

window.location = "/RolePermissions/Index?roleId=" + roleId;

}

else {

//刷新当前

location.reload();

}

});

}

</script>

1.2.2.      Action处理

MVC将对Post数据自动完成模型绑定。


[HttpPost]

[ValidateAntiForgeryToken]

public async Task<ActionResult> Create(string roleId, IEnumerable<PermissionViewModel> data)

Action采用JsonResult返回JSON格式数据给客户端,代码见/RolePermissions/Create。


//方法1,用JsonResult类封装,格式为Json,客户端直接使用

var response = new Dictionary<string, bool>();

response.Add("Success", true);

return new JsonResult { Data = response };

也可返回Json字符串,由客户端自行解析处理,代码见/PermissionsAdmin/Create。


//方法2,使用Newtonsoft.Json序列化结果对象

//格式为json字符串,客户端需要解析,即反序列化

var result = JsonConvert.SerializeObject(new { Success = true });

return new JsonResult { Data = result };

1.2.3.      Client解析JSON

此时Client拿到的已经是JSON数据,直接使用即可。


function (result) {

if (result.Success) {

//跳转到Index

window.location = "/RolePermissions/Index?roleId=" + roleId;

}

else {

//刷新当前

location.reload();

}

}

如果Action的返回格式为Json字符串,需要转换为JSON对象。


function (jsonStr) {

//数据为Json字符串,需要解析

var result = eval("(" + jsonStr + ")");

if (result.Success) {

//跳转到Index

window.location = "/PermissionsAdmin/Index";

}

else {

//刷新当前

location.reload();

}

}

1.3.       跨站点攻击

ASP.NET MVC通过验证表单填写前后的Token来实现防御,在View中添加@Html.AntiForgeryToken()会生成名为__RequestVerificationToken的隐藏Input元素,服务端使用特性ValidateAntiForgeryToken验证该Token即可,通常该Token会随表单提交无需其它处理。

View


@Html.AntiForgeryToken();

Action


[Description("新建角色,提交")]

[HttpPost]

[ValidateAntiForgeryToken]

public async Task<ActionResult> Create(RoleViewModel roleViewModel)

也可用JS自行处理。

JS取Token


//取token

var token = $("input[name=‘__RequestVerificationToken‘]").val();

JQuery发送Token


//提交服务端保存

$.post("/RolePermissions/Create",

{

"__RequestVerificationToken": token,

"roleId": roleId,

"data": data

},

时间: 2024-10-10 19:35:12

ASP.NET Identity “角色-权限”管理 10的相关文章

ASP.NET Identity “角色-权限”管理 1

本文是基于ASP.NET Identity v2的实施的“角色-权限”实验小结,不对基础知识进行介绍,读者需理解面向对象.接口编程.AOP.MVC,掌握ASP.NET MVC.JavaScript和EF. 环境:VS2013 update4,EF6,ASP.NET MVC 5,bootstrap,Automapper,MvcPager等. 1.       前言 VS2013 ASP.NET MVC模板只提供基础的Role-User权限管理,如:账号管理Account,登录注册等,为提高实用性,

ASP.NET Identity “角色-权限”管理 3

1.1.       Role管理 参考1:ASP.NET Identity 2.0: Customizing Users and Roles 参考2:asp.net identity 2.2.0 中角色启用和基本使用(一) 1.1.1.      增加ApplicationRole 新建ApplicationRole,可参考ApplicationUser,过程如下所述. 修改IdentityModel.cs,新增ApplicationRole,继承自IdentityRole,增加属性Descr

ASP.NET Identity “角色-权限”管理 6

1.1.       Role-Permission UserRole是User与Role的关联表,代码见User-Role分析.参考可得Role-Permission的设计,代码图如下,RolePermission是Role与Permission的关联表,保存着RoleId与PermissionId. 1.1.1.      新建RolePermission 在IdentityModels.cs中增加ApplicationRolePermission类. public class Applic

ASP.NET Identity “角色-权限”管理 5

1.1.       Permission管理 参考1:Asp.Net大型项目实践(11)-基于MVC Action粒度的权限管理 参考2:ASP.NET MVC三个重要的描述对象:ActionDescriptor 这里Permission指的是Action,即供用户调用的功能. 1.1.1.      新建ApplicationPermission 修改IdentityModel.cs,新增ApplicationPermission,此处设计了属性Id.Controller.Action.Pa

ASP.NET Identity “角色-权限”管理 2

1.       自定义属性 参考:ASP.NET Identity 2.0: Customizing Users and Roles 以扩展ApplicationUser为例. 1.1.       新增Password属性 修改IdentityModel.cs,ApplicationUser继承自IdentityUser,只需为它增加Password属性,用来保存密码明文. public class ApplicationUser : IdentityUser { public Applic

ASP.NET Identity “角色-权限”管理 9

1.1.       对象映射 参考1:https://github.com/AutoMapper/AutoMapper 参考2:AutoMapper的配置方法 参考3:使用AutoMapper实现Dto和Model的自由转换(上) 为适应View的变化,将数据封装到ViewModel,从而保持领域模型的纯净稳定,这里使用AutoMapper处理Model与ViewModel之间映射. 1.1.1.      映射类Profile 继承自Profile,每个映射类中就是一套对象间映射规则,根据实

ASP.NET Identity “角色-权限”管理 7

1.       验证管理 参考:认识ASP.NET MVC的5种AuthorizationFilter ASP.NET MVC框架中已经提供了基于AOP验证的机制与基本部件,重点是FilterAttribute. 1.1.       新建验证Attribute 基本思路:父类验证逻辑通过,再验证当前用户所属角色是否具备访问权限.MVC已经有了一个权限验证实现AuthorizeAttribute,这里只需要继承该类,重写相应方法,增加自定义验证逻辑即可. 注意:属性Roles和Users中的特

ASP.NET Identity “角色-权限”管理 8

1.       典型应用场景 1.1.       EF数据存储 EF的核心是数据上下文DbContext,它提供了基本的数据存储操作方法. 1.1.1.      新增 采用添加对象的方式. //创建权限 var permission = new ApplicationPermission { Id = item.Id, Action = item.Action, Controller = item.Controller, Description = item.Description };

ASP.NET Identity “角色-权限”管理 4

1.1.       User-Role分析 想必大家已经注意到了Microsoft.AspNet.Identity.EntityFramework是对Microsoft.AspNet.Identity.Core的EF实现,微软是如何处理IdentityUser与IdentityRole的关系?因两者为多对多关系,会在关系型数据库增加一张关联表,故增加IdentityUserRole,并在IdentityUser与IdentityRole中添加IdentityUserRole列表,代码如下所示.