功能实现
角色维护是对各个不同的角色进行权限的管理，不同角色的登录系统时所看到页面和操作的权限是不同的。
系统管理登录时所看到的模块
测试账号登录时看到模块
角色维护
这是我做的角色维护界面，这里将整个项目分了五个板块，每个板块下又有细分的模块，在选择角色时会回填该角色对应的权限也可以对其进行修改设置。
下面我介绍一下实现的过程。
数据库设计
对角色的管理当然需要对相关的权限进行存储，这里我做的是模块的权限管理并没有细分到每一项操作，所以数据库设计可以简单一些。
需要设计三张表：角色表、模块表、权限表
角色表
角色表存放的就是各个角色相关的数据
roleID：角色ID role:角色名称 jsms:角色说明
模块表
模块表就存放着各个模块的数据
后面的页面也是依据模块ID设定元素的ID
mkID：模块ID mokuai：模块名称
权限表
权限表用于建立角色与各模块之间的联系并且设定该角色的权限
qxID：权限ID roleID：角色ID' mkID：模块ID' sfqx：是否有权限true/false
页面设计及控制器代码
//这是角色维护的页面代码
//这里的重点是每一个checkbox都设定了一个value值
//这个value就是它对应的模块在数据库的ID
<ul class="qxul">
<li><input type="checkbox" id="xstjbg" value="26"><label for="xstjbg">销售统计报告</label></li>
<br>
</ul>
<ul class="qxul">
<li><input type="checkbox" id="xnzhcx" value="27"><label for="xnzhcx">虚拟账户查询</label></li>
<br>
</ul>
<ul class="qxul">
<li><input type="checkbox" id="zfbg" value="28"><label for="zfbg">支付报告</label></li>
<br>
</ul>
<ul class="qxul">
<li><input type="checkbox" id="ystjbg" value="29"><label for="ystjbg">运输统计报告</label></li>
<br>
</ul>
如何回填角色权限
在选择一个角色时需要对角色的权限信息进行回填
控制器代码
//查询时传入角色的ID
public ActionResult qxcx(int jsid)
{
//在权限表中查询该角色相关的权限信息
var qx = (from db in mymodels.XT_quanxian
where db.roleID == jsid
select new
{
mkid=db.mkID,//模块ID
sf=db.sfqx,//是否有权限
}).ToList();
//返回查询到的数据
return Json(qx, JsonRequestBehavior.AllowGet);
}
页面代码
function quanxian(jsid) {
//向控制器进行查询
$.getJSON("qxcx?jsid=" + jsid, function (data) {
//用each遍历返回的结果
$.each(data, function (i) {
//判断是否有该权限
//因为我的模块与页面都是按顺序设计好了
//所这里的i就可以当做模块ID与对checkbox的序号
if (data[i].sf == true) {
//==true说明有该权限，选中对应的checkbox
$("input[type='checkbox']").eq(i).prop("checked", true);
}
else {
$("input[type='checkbox']").eq(i).prop("checked", false);
}
});
})
}
完成效果，选中角色后回填相关的数据
登录时的判断
完成了角色授权的管理，下一步就是对登录用户的权限进行判断了。‘
主页模块导航栏代码
//这里每个li标签都设定了一个ID
//这个ID也是对应模块在数据库中的ID
<ul class="submenu">
<li class="" id="28">
<a href="javascript:;" id="zhifutonji">
<i class="menu-icon fa fa-caret-right"></i>支付统计
</a>
<b class="arrow"></b>
</li>
<li class="active" id="26">
<a href="javascript:;" id="xiaoshoubaogao">
<i class="menu-icon fa fa-caret-right"></i>销售报告统计
</a>
<b class="arrow"></b>
</li>
<li class="" id="T29">
<a href="javascript:;" id="yunshushuju">
<i class="menu-icon fa fa-caret-right"></i>运输数据查询
</a>
<b class="arrow"></b>
</li>
<li class="" id="27">
<a href="javascript:;" id="xunizhanhu">
<i class="menu-icon fa fa-caret-right"></i>虚拟账户查询
</a>
<b class="arrow"></b>
</li>
</ul>
控制器代码
//查询时传入角色ID
public ActionResult qxcx(int ydid)
{
//在权限表中查询该角色的相关权限
//这里多加了个db.sfqx == false的判断
//就是只查询该角色没有权限的模块
var qx = (from db in myModels.XT_quanxian
where db.roleID == ydid && db.sfqx == false
select new
{
qxid = db.mkID//模块ID
}).ToList();
//返回数据到页面
return Json(qx, JsonRequestBehavior.AllowGet);
}
页面代码
//向控制器进行查询
$.getJSON("qxcx?ydid=" + jsid, function (data) {
//判断返回的数据是否为0条
if (data.length != 0) {
//遍历数据
$.each(data, function (i) {
//因为返回的都是该角色没有权限的模块
//这里直接通过ID将对应的模块隐藏
$("#" + data[i].qxid).hide();
});
}
});
开发总结
在做角色维护时一开始想到的也是参考一下老师教过代码，毕竟这功能是教过的。可是我发现老师说教的角色管理是细分到每个模块的每个功能点上的，而我的这个项目的要求只需要管理的是整个模块的权限，所以就自己想着这个应该比较简单就自己去设计了一下数据库，然后又思考如何更便捷实现这个功能。最后想到通过将各个导航元素的ID与数据库模块ID相对应就能快速的实现权限的判断与隐藏。
其实在做项目的过程中更多应该是学会自己去解决问题，独立去思考更好的解决方案，这样才能提升自己的思维，很多的功能的解决方案不是唯一，要多去尝试不同的方法，去实践自己的想法。