智能商贸5，登录验证与角色权限管理

1. 登陆验证
   先将数据库的密码加盐加密
   创建一个工具类

public class MD5Util {
    private static final String SALT = "itsource";
    private static final  int HASHITERATIONS = 10;
    //传入一个字符串，返回加密10次后的密码
    public static String newPassword(String password){
        SimpleHash newpassword = new SimpleHash("MD5", password, SALT, HASHITERATIONS);
        return newpassword.toString();
    }
}

1 修改数据库中的密码【加密】

@Test
public void testUpdatePwd() throws Exception{
    List<Employee> list = employeeService.findAll();
    for (Employee employee : list) {
        employee.setPassword(MD5Util.createMd5Str(employee.getUsername()));
        employeeService.save(employee); //注:save是添加与修改
    }
}
添加的数据也需要加密
EmployeeServiceImpl
@Override
public void save(Employee employee) {
    if(employee.getId()==null){
        //代表是添加功能(需要进入密码加密)
        employee.setPassword(MD5Util.createMd5Str(employee.getPassword()));
    }
    super.save(employee);
}

2. 登录页面，与判断登录页面需要放行，静态资源也需要放行

AplicationContext-shiro中配置放行
<bean id="shiroFilter" class="org.apache.shiro.spring.web.ShiroFilterFactoryBean">
    <property name="securityManager" ref="securityManager"/>
    <!-- 登录的url,如果没有登录，你访问的路径会跳到这个页面 -->
    <property name="loginUrl" value="/login.jsp"/>
    <!-- 登录成功的url,如果登录成功，会跳转到这个页面 -->
    <property name="successUrl" value="/s/main.jsp"/>
    <!-- 没有权限时跳转到这个位置 -->
    <property name="unauthorizedUrl" value="/s/unauthorized.jsp"/>

3. Map中配置静态资源放行

LinkedHashMap<String, String> hashMap = new LinkedHashMap<>();
hashMap.put("/s/login.jsp", "anon");
hashMap.put("/login", "anon");
/*静态资源放行*/
hashMap.put("*.js","anon");
hashMap.put("*.css","anon");
hashMap.put("/css/**","anon");
hashMap.put("/assets/**","anon");
hashMap.put("/fonts/**","anon");
hashMap.put("/js/**","anon");
hashMap.put("/easyui/**","anon");
hashMap.put("/images/**","anon");

hashMap.put("/s/permission.jsp", "perms[user:*]");
hashMap.put("/s/manager.jsp", "perms[manager:*]");
hashMap.put("/**","authc");
return hashMap;

4. 回车键登录绑定

$(document.documentElement).on("keyup", function(event) {
    //console.debug(event.keyCode);
    var keyCode = event.keyCode;
    console.debug(keyCode);
    if (keyCode === 13) { // 捕获回车
        submitForm(); // 提交表单
    }
});

5. 登录过期问题导致登陆页面不断嵌套问题

// 检查自己是否是顶级页面
if (top != window) {// 如果不
是顶级
    //把子页面的地址，赋值给顶级页面显示
    window.top.location.href = window.location.href;
}

6. 欢迎登录，与注销功能

<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<div style="text-align: right; margin-right:10px;">
        <shiro:user>
            欢迎[<shiro:principal
        />]登录，<a href="${pageContext.request.contextPath}/logout">退出</a>
        </shiro:user>
</div>

2. 权限管理
3. 配置角色与权限表【多对多】员工与角色表【多对多】

角色表
@Entity
@Table(name="role")
public class Role extends BaseDomain {
    private String name;
    private String sn;
    @ManyToMany(fetch = FetchType.LAZY)
    @JoinTable(name = "role_permission",
            joinColumns = @JoinColumn(name = "role_id"),
            inverseJoinColumns = @JoinColumn(name = "permission_id")
    )
private List<Permission> permission = new ArrayList<>();

权限表
@Entity
@Table(name="permission")
public class Permission extends BaseDomain {
    private String name;
    private String url; //对应的资源
    private String descs;
private String sn; //对象的权限名称

员工表
@Entity
public class Employee extends BaseDomain{
    private String username;
    private String email;
    private Integer age;
    private String headImage;
    private String password;
    //多对多:配置中间表
    @ManyToMany(fetch = FetchType.LAZY)
    @JoinTable(name = "employee_role",
            joinColumns = @JoinColumn(name = "employee_id"),
            inverseJoinColumns = @JoinColumn(name = "role_id")
    )
    @JsonIgnore //生成json是忽略这个属性(数据大多，全部拿到没有意义，还有可能造成死循环)
private Set<Role> roles = new HashSet<>();

2. 生成相应的repository，query，service，controller层
3. Role.jsp role.js
   Role.jsp

<%@include file="../head.jsp" %>

角色名称	角色编号	对应权限

添加 修改 删除

名称： 查找

            <td>
                角色编号:<input class="easyui-validatebox" type="text" name="sn"></input>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="easyui-layout" style="width:100%;height:400px;">
                    <div data-options="region:'west',split:true" style="width:50%;">
                        <table id="userPermissionGrid">
                            <thead>
                            <tr>
                                <th width="10"  field="name" >名称</th>
                                <th width="20"  field="url" >对应的资源</th>
                                <th width="20"  field="sn" >对象的权限</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div data-options="region:'center',split:true" style="width:50%;">
                        <table id="allPermissionGrid">
                            <thead>
                            <tr>
                                <th width="10"  field="name" >名称</th>
                                <th width="20"  field="url" >对应的资源</th>
                                <th width="20"  field="sn" >对象的权限</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
              </table>
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-method="save">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#roleDialog').dialog('close')">取消</a>
    </div>
</form>

角色名称:

添加

修改

删除

Role.js //表格数据格式化 function formatObj(value){ if(value){ return value.name; } }

//格式化权限 formatPermissions
function formatPermissions(arr){
var permissionStr = “”;
for(var i=0;i<arr.length;i++) {
var obj = arr[i];
if (i != arr.length-1) {
permissionStr += obj.name +",";
}else{
permissionStr += obj.name;
}
}

return permissionStr;

}

$(function(){
//定义form表单
var searchForm = $("#searchForm");
var roleGrid = $("#roleGrid");
//获取roleDialog
var roleDialog = $("#roleDialog");
//定义表单新增的form
var roleForm = $("#roleForm");

//选中角色权限
var userPermissionGrid = $("#userPermissionGrid");
//所有权限
var allPermissionGrid = $("#allPermissionGrid");

//绑定事件 easyui 第二天的时候
$("a[data-method]").on('click',function(){
   //获取 data-method属性 <a data-method="seacher">
    var methodName = $(this).data("method");
    //动态调用方法 itsource["seacher"]
    itsource[methodName]();
});
//对象
var itsource = {
    search:function(){
      //怎么完成高级查询 jquery.jdirk.js 这个方法 这是jquery扩展方法
        //该方法返回一个 JSON Object，返回对象中的每个数据都表示一个表单控件值。
        var param = searchForm.serializeObject();
        //发送查询数据库 --加载表格 发送请求 /role/page
        roleGrid.datagrid('load',param);
    },
    add:function(){
        
        //清空表单
        roleForm.form('clear');
        //清空表格数据
        userPermissionGrid.datagrid('loadData',[]);
        //新增 --弹出一个对话框--装一个表单
        roleDialog.dialog('center').dialog('open');

    },
    edit:function(){


        //选择一条数据进行修改
        var row = roleGrid.datagrid('getSelected');
        if(row){
            //弹出对话框 -- open 加载表格数据
            roleDialog.dialog('center').dialog('open');

            //表格里面数据清空
            //userPermissionGrid.datagrid('loadData',[]);
            //修改 -- 回显示数据 表单里面数据
            roleForm.form('load',row);
            //回显表格里面的数据

            // console.log(row.permissions);
            // userPermissionGrid.datagrid('loadData',row.permissions);

            //存一份数据到副本里面
            var tempPermissions = [];
            $.extend(tempPermissions,row.permissions);
            //加载到表格里面
            userPermissionGrid.datagrid('loadData',tempPermissions);


        }else{
            //提示用户
            $.messager.alert('温馨提示：','请选中一条数据进行修改','info');
            return;
        }


    },
    del:function(){
        //判断表格里面是否选中得数据
        var row = roleGrid.datagrid('getSelected');
        if(row){
            //是否确认要删除数据
            $.messager.confirm('温馨提示','你确定要删除吗?',function(value){
                if(value){
                    //获取id值

                    //发送ajax到后台进行删除数据
                    $.get('/role/delete',{"id":row.id},function(data){
                        //返回json对象
                        if(data.success){
                            $.messager.alert('温馨提示：','删除成功','info');
                            //重新加载数据
                            roleGrid.datagrid('reload');
                        }else{
                            $.messager.alert('温馨提示：','删除失败'+data.msg,'error');
                        }
                    });
                }
            })

        }else{
            //提示用户
            $.messager.alert('温馨提示：','请选中一条数据进行删除','info');
            return;
        }

    },
    save:function(){
        var url = "/role/save";
        //获取隐藏域里面id值
        var id = $("#roleId").val();
        if(id){
            url = "/role/update?cmd=update"
        }
        //保存方法 --提交表单的数据到后台
        roleForm.form('submit', {
                url:url,
                onSubmit: function(params){
                    //提交额外的参数 补充表格里面参数
                    //获取选择权限的所有的数据
                   var allRows =  userPermissionGrid.datagrid('getRows');
                   for(var i=0;i<allRows.length;i++) {
                       var row = allRows[i];
                       //把 permissions[0].id = 1 permissions[1].id = 2
                       // 添加有顺序的 ，后台使用List
                       params["permissions["+i+"].id"] = row.id ;
                   }
                    // 提交之前的验证
                   return roleForm.form('validate');
                 },
            success:function(data){
                    //字符串 转换成json对象
                  var dataJson =  $.parseJSON(data);
                  if(dataJson.success){
                      $.messager.alert('温馨提示：','操作成功','info');
                      //重新加载数据
                      roleGrid.datagrid('reload');
                      //关闭对话框
                      roleDialog.dialog('close');
                  }else{
                      $.messager.alert('温馨提示：','保存失败'+dataJson.msg,'error');
                      roleDialog.dialog('close');
                  }
            }
        });
    },
    addPermissions:function(index,row){
        //双击添加权限
        //把选中数据 添加到 左边表格
        //重复的数据不要添加
        //获取所有数据
        var allrows = userPermissionGrid.datagrid('getRows');
        for(var i=0;i<allrows.length;i++){
            var rowData = allrows[i];
            if(rowData.id == row.id){
                //重复
                $.messager.show({
                    title:'提示',
                    msg:'该权限已经添加！',
                    timeout:2000,
                    showType:'slide'
                });
                return;
            }
        }

       userPermissionGrid.datagrid('appendRow',row);

    },
    removePermissions:function(rowIndex,row){
        //删除数据
        userPermissionGrid.datagrid('deleteRow',rowIndex);
    }
}

//初始化表个
userPermissionGrid.datagrid({
    fit:true,
    fixed:true,
    fitColumns:true,
    rownumbers:true,
    onDblClickRow:itsource["removePermissions"]

});

//加载所有shu7ju
allPermissionGrid.datagrid({
    fit:true,
    fixed:true,
    fitColumns:true,
    singleSelect:true,
    url:'/permission/page',
    rownumbers:true,
    pagination:true,
    onDblClickRow:itsource["addPermissions"]
})

})

4. 添加修改功能样式
   
5. 重点问题分析
6. Dialog对话框左右的分页布局，需要加载不同的信息
7. 左右两边绑定双击事件，左边双击移除，右边双击克隆此行到左边
8. 将数据存到副本里面，解决数据丢失问题
   var tempPermissions = [];
   $.extend(tempPermissions,row.permissions);
   //加载到表格里面
   userPermissionGrid.datagrid(‘loadData’,tempPermissions);
9. 先打开对话框，再回显数据【不容易出问题】