easyui+ssm+shiro做的登錄註冊修改密碼審覈用戶(二)
登錄頁面
用戶登錄：根據輸入用戶名和密碼來判斷是否登錄成功,要有記住密碼功能，還要設置登錄超時功能
根據這張效果圖，我們可以需要一個form表單用來傳遞參數，參數一共有兩個，還有兩個按鈕
登錄的form表單代碼如下，前端通過ajax把name值傳給後臺
<div class="form-bottom" style="height:300px;">
<form id="loginForm" action="${ctx }/shiroLogin" method="post" class="login-form">
<div class="form-group">
<label class="sr-only" for="form-username">用戶名</label>
<input type="text" name="username" placeholder="用戶名..." class="form-username form-control" id="form-username">
</div>
<div class="form-group">
<label class="sr-only" for="form-password">密碼</label>
<input type="password" name="password" placeholder="密碼..." class="form-password form-control" id="form-password">
</div>
<!-- 記住密碼<input type="checkbox" name="remeberMe" value="1"> -->
<div style="float:right;height:40px;">
<input type="checkbox" id="remember" checked >記住密碼<br/><br/>
</div>
<button id="login" type="submit" class="btn" onclick="loginBtn_click()">登 錄</button>
<p></p>
</form>
<a style='color:blue' href='javascript:void(0)' title='註冊' onclick='register()'>用戶註冊</a>
<div style="float:right;">
<a style='color:blue' href='javascript:void(0)' title='修改密碼' onclick='updatePwd()'>修改密碼</a>
</div>
</div>
可以看到form表單有個action屬性，action="${ctx }/shiroLogin"，這就是傳入到後臺的接口
url： "/yhzn/shiroLogin" shiroLogin登錄方法
data : {"username":username,"password":password} 用戶名和密碼參數
$.ajax({
type : "post",
url : "/yhzn/shiroLogin",
data : {"username":username,"password":password},
dataType : "json",
success : function(data) {
if(data.status == "y"){
window.location.href = "${ctx }/home";
}else{
alert("4324");
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("error:"+textStatus);
}
});
LoginController中的shiroLogin方法
/**
* 登錄
* @param username
* @param password
* @return
*/
@RequestMapping("/shiroLogin")
@ResponseBody
public String login(@RequestParam String username, @RequestParam String password,HttpServletRequest request) {
String msg = "";
/*String ip=this.getRequest().getRemoteAddr();
if(ip==null||ip.indexOf("10.", 0)<0)
{
return "{\"info\":\"IP不在允許範圍內!\",\"status\":\"n\"}";
}*/
Subject currentUser = SecurityUtils.getSubject();
try {
// 將用戶名和密碼封裝爲UsernamePasswordToken對象
UsernamePasswordToken token = new UsernamePasswordToken(username,password);
token.setRememberMe(true);
currentUser.login(token);
String hashAlgorithName = "MD5";
Object credentials = password;
Object salt = ByteSource.Util.bytes(username);
int hashIterations = 1024;
Object result = new SimpleHash(hashAlgorithName,credentials,salt,hashIterations);
// user.setPassword(String.valueOf(result));
HashMap<String,String> para=new HashMap<String,String>();
para.put("userName", username);
para.put("password", String.valueOf(result));
User user = userService.checkUser(para);
if(user==null){
msg = "{\"info\":\"用戶名或密碼錯誤！\",\"status\":\"n\"}";
}else if("1".equals(user.getState())){
msg = "{\"info\":\"該用戶未審覈！\",\"status\":\"n\"}";
}else if(user.getRoleId()==null){
msg = "{\"info\":\"該用戶未分配角色！\",\"status\":\"n\"}";
}else{
currentUser.isPermitted(username);
String roleId= sysRoleService.findRolesByUserName(user.getUserName());
List<Permission> permission = sysRoleService.permissionById(roleId);
Set<String> biaoshi = userService.findPermissionsByUserName(user.getUserName());
request.getSession().setAttribute("biaoshi", biaoshi);
request.getSession().setAttribute("permission", permission);
//獲取訪問者IP
//String ip = this.getRequest().getRemoteAddr();
//user.setLoginIp(ip);
user.setLoginIp(getIp(request));
//日誌類型，操作人，操作內容，操作人IP,操作方法
sysLogService.insertSysLog("登錄",user.getTrueName(),"登錄系統",user.getLoginIp(),"/shiroLogin");
this.getRequest().getSession().setAttribute("user", user);
msg = "{\"info\":\"登錄成功！\",\"status\":\"y\"}";
}
} catch (UnknownAccountException e) {
msg = "{\"info\":\"登錄失敗【用戶不存在】！\",\"status\":\"n\"}";
} catch (IncorrectCredentialsException e) {
msg = "{\"info\":\"登錄失敗【密碼錯誤】！\",\"status\":\"n\"}";
} catch (LockedAccountException e) {
msg = "{\"info\":\"登錄失敗【用戶已鎖】！\",\"status\":\"n\"}";
} catch (AuthenticationException e) {
msg = "{\"info\":\"登錄失敗【認證異常】！\",\"status\":\"n\"}";
} catch (Exception e) {
e.printStackTrace();
msg = "{\"info\":\"用戶名或密碼錯誤！\",\"status\":\"n\"}";
}
return msg;
}
UserService中的checkUser方法
/**
* 用戶名密碼認證
*/
@Override
public User checkUser(HashMap<String,String> para){
return userDao.checkUser(para);
}
UserDao中的checkUser方法
/**
* 驗證用戶名密碼
*
* @param para
* @return
*/
public User checkUser(HashMap<String, String> para);
UserDao.xml的根據用戶名和密碼查詢用戶的SQL語句
<!-- 驗證用戶名密碼 -->
<select id="checkUser" parameterType="map" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
from SYS_USER
where USER_NAME = #{userName}
and PASSWORD =#{password}
and DELETE_FLAG = '0'
</select>
登錄超時提醒
現在web.xml裏面設置session超時時間
<!-- 設置session有效時間-->
<session-config>
<session-timeout>15</session-timeout>
</session-config>
然後再到login.jsp頁面加上如下代碼
if(window != top) {
alert("由於您長時間未操作，登錄信息已超時，請重新登錄!!!");
top.location.href = "${ctx}/login";
}
記住密碼
HTML5 提供了兩種在客戶端存儲數據的新方法：
- localStorage - 沒有時間限制的數據存儲
- sessionStorage - 針對一個 session 的數據存儲
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因爲它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，數據不是由每個服務器請求傳遞的，而是隻有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成爲可能。
對於不同的網站，數據存儲於不同的區域，並且一個網站只能訪問其自身的數據。
HTML5 使用 JavaScript 來存儲和訪問數據。
localStorage 方法存儲的數據沒有時間限制。第二天、第二週或下一年之後，數據依然可用。
<!-- 記住密碼
<input type="checkbox" name="remeberMe" value="1"> -->
<div style="float:right;height:40px;">
<input type="checkbox" id="remember" checked >記住密碼<br/><br/>
</div>
$(document).ready(function(){
var strName = localStorage.getItem('keyName');
var strPass = localStorage.getItem('keyPass');
if(strName){
$('#form-username').val(strName);
}if(strPass){
$('#form-password').val(strPass);
}
});
function loginBtn_click(){
var strName = $('#form-username').val();
var strPass = $('#form-password').val();
localStorage.setItem('keyName',strName);
if($('#remember').is(':checked')){
localStorage.setItem('keyPass',strPass);
}else{
localStorage.removeItem('keyPass');
}
}