首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >easyui+ssm+shiro做的登录注册修改密码审核用户(二)

easyui+ssm+shiro做的登录注册修改密码审核用户(二)

作者头像
Java架构师必看
发布于 2021-04-13 15:56:43
发布于 2021-04-13 15:56:43
9590
举报
文章被收录于专栏:Java架构师必看Java架构师必看

easyui+ssm+shiro做的登录注册修改密码审核用户(二)

强烈推介IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码

easyui+ssm+shiro做的登录注册修改密码审核用户(二)

登录页面

用户登录:根据输入用户名和密码来判断是否登录成功,要有记住密码功能,还要设置登录超时功能

根据这张效果图,我们可以需要一个form表单用来传递参数,参数一共有两个,还有两个按钮

登录的form表单代码如下,前端通过ajax把name值传给后台

代码语言:javascript
复制
<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}     用户名和密码参数

代码语言:javascript
复制
$.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方法

代码语言:javascript
复制
	/**
	 * 登录
	 * @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方法

代码语言:javascript
复制
    /**
	 * 用户名密码认证
	 */
	@Override
	public 	User checkUser(HashMap<String,String> para){
		return userDao.checkUser(para);
	}

UserDao中的checkUser方法

代码语言:javascript
复制
    /**
	 * 验证用户名密码
	 * 
	 * @param para
	 * @return
	 */
	public User checkUser(HashMap<String, String> para);

UserDao.xml的根据用户名和密码查询用户的SQL语句

代码语言:javascript
复制
<!-- 验证用户名密码 -->
	<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超时时间

代码语言:javascript
复制
<!-- 设置session有效时间-->
<session-config>
   <session-timeout>15</session-timeout>
</session-config>

然后再到login.jsp页面加上如下代码

代码语言:javascript
复制
if(window != top) {
	alert("由于您长时间未操作,登录信息已超时,请重新登录!!!");
	top.location.href = "${ctx}/login";
} 

记住密码

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

代码语言:javascript
复制
<!-- 记住密码
<input type="checkbox" name="remeberMe" value="1"> -->
	<div style="float:right;height:40px;">
	<input type="checkbox" id="remember" checked >记住密码<br/><br/>
</div>
代码语言:javascript
复制
$(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);
	         }
     	});

代码语言:javascript
复制
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');
             }
         }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
目录
  • 登录页面
  • 登录超时提醒
  • 记住密码
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档