1. 需求分析
手机快速登录功能,就是通过短信验证码的方式进行登录。这种方式相对于用户名密码登录方式,用户不需要记忆自己的密码,只需要通过输入手机号并获取验证码就可以完成登录,是目前比较流行的登录方式。
2. 手机快速登录
2.1 页面调整
登录页面为/pages/login.html
2.1.1 发送验证码
为获取验证码按钮绑定事件,并在事件对应的处理函数中校验手机号,如果手机号输入正确则显示30秒倒计时效果并发送ajax请求,发送短信验证码
<div class="input-row">
<label>手机号</label>
<div class="loginInput">
<input v-model="loginInfo.telephone" id='account' type="text" placeholder="请输入手机号">
<input id="validateCodeButton" @click="sendValidateCode()" type="button" style="font-size: 12px" value="获取验证码">
</div>
</div>
<div class="input-row">
<label>验证码</label>
<div class="loginInput">
<input v-model="loginInfo.validateCode" style="width:80%" id='password' type="text" placeholder="请输入验证码">
</div>
</div>
<script>
var vue = new Vue({
el:'#app',
data:{
loginInfo:{}//登录信息
},
methods:{
//发送验证码
sendValidateCode(){
var telephone = this.loginInfo.telephone;
if (!checkTelephone(telephone)) {
this.$message.error('请输入正确的手机号');
return false;
}
validateCodeButton = $("#validateCodeButton")[0];
clock = window.setInterval(doLoop, 1000); //一秒执行一次
axios.post("/validateCode/send4Login.do?telephone=" + telephone).then((response) => {
if(!response.data.flag){
//验证码发送失败
this.$message.error('验证码发送失败,请检查手机号输入是否正确');
}
});
}
}
});
</script>
注意:使用计时任务进行30秒倒计时更新
在ValidateCodeController中提供send4Login方法,调用短信服务发送验证码并将验证码保存到redis
/**
* 用户进行手机快速登陆,发送验证码
* @param telephone
* @return
*/
@RequestMapping("/send4Login")
public Result send4Login(String telephone) {
if (telephone == null) {
return new Result(false, MessageConstant.SEND_VALIDATECODE_FAIL);
}
try {
//获取随机验证码
Integer code = ValidateCodeUtils.generateValidateCode(6);
//发送验证码
SMSUtils.sendShortMessage(SMSUtils.VALIDATE_CODE, telephone, code.toString());
//将验证码存入Redis
jedisPool.getResource().setex(telephone + RedisMessageConstant.SENDTYPE_LOGIN, 500, code.toString());
//发送成功通知
return new Result(true, MessageConstant.SEND_VALIDATECODE_SUCCESS);
} catch (ClientException e) {
e.printStackTrace();
return new Result(false, MessageConstant.SEND_VALIDATECODE_FAIL);
}
}
注意:4在java为for的意思
,2为to的意思
2.1.2 提交登录请求
为登录按钮绑定事件
<div class="btn yes-btn"><a @click="login()" href="#">登录</a></div>
//登录
login(){
var telephone = this.loginInfo.telephone;
if (!checkTelephone(telephone)) {
this.$message.error('请输入正确的手机号');
return false;
}
axios.post("/member/login.do",this.loginInfo).then((response) => {
if(response.data.flag){
//登录成功,跳转到index.html
window.location.href="index.html";
}else{
//失败,提示失败信息
this.$message.error(response.data.message);
}
});
}
2.2 后台代码
2.2.1 Controller
在health_mobile工程中创建MemberController并提供login方法进行登录检查,处理逻辑为:
- 校验用户输入的短信验证码是否正确,如果验证码错误则登录失败
- 如果验证码正确,则判断当前用户是否为会员,如果不是会员则自动完成会员注册
- 向客户端写入Cookie,内容为用户手机号
- 将会员信息保存到Redis,使用手机号作为key,保存时长为30分钟
package com.itheiheihei.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.alibaba.fastjson.JSON;
import com.itheiheihei.constant.MessageConstant;
import com.itheiheihei.constant.RedisMessageConstant;
import com.itheiheihei.entity.Result;
import com.itheiheihei.pojo.Member;
import com.itheiheihei.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import redis.clients.jedis.JedisPool;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
import java.util.Date;
import java.util.Map;
/**
* 处理会员相关操作
*
* @author 嘿嘿嘿1212
* @version 1.0
* @date 2019/10/22 16:29
*/
@RestController
@RequestMapping("/member")
public class MemberController {
@Autowired
private JedisPool jedisPool;
@Reference
private MemberService memberService;
@RequestMapping("/login")
public Result check(HttpServletResponse response, @RequestBody Map map) {
String validateCode = (String) map.get("validateCode");
String telephone = (String) map.get("telephone");
//判空
if (validateCode == null || telephone == null) {
return new Result(false, MessageConstant.TELEPHONE_VALIDATECODE_NOTNULL);
}
//获取Redis中的验证码
String code = jedisPool.getResource().get(telephone + RedisMessageConstant.SENDTYPE_LOGIN);
if (validateCode.equals(code)) {
//验证码成功
Member member = memberService.findByTelephone(telephone);
if (member == null) {
//自动注册会员
member = new Member();
member.setRegTime(new Date());
member.setPhoneNumber(telephone);
memberService.add(member);
}
//创建Cookie,存入手机号
Cookie cookie = new Cookie("login_member_telephone", telephone);
cookie.setPath("/");
cookie.setMaxAge(60 * 60 * 24 * 30);
response.addCookie(cookie);
//将会员存入Redis中
String jsonMember = JSON.toJSONString(member);
jedisPool.getResource().setex(telephone, 60 * 30, jsonMember);
return new Result(true, MessageConstant.LOGIN_SUCCESS);
} else {
//验证码错误
return new Result(false, MessageConstant.VALIDATECODE_ERROR);
}
}
}
2.2.2 服务接口
在MemberService服务接口中提供findByTelephone和add方法
public void add(Member member);
public Member findByTelephone(String telephone);
2.2.3 服务实现类
在MemberServiceImpl服务实现类中实现findByTelephone和add方法
package com.itheiheihei.service.impl;
import com.alibaba.dubbo.config.annotation.Reference;
import com.alibaba.dubbo.config.annotation.Service;
import com.itheiheihei.dao.MemberDao;
import com.itheiheihei.pojo.Member;
import com.itheiheihei.service.MemberService;
import com.itheiheihei.utils.MD5Utils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
/**
* 会员服务
*
* @author 嘿嘿嘿1212
* @version 1.0
* @date 2019/10/22 18:18
*/
@Service(interfaceClass = MemberService.class)
@Transactional
public class MemberServiceImpl implements MemberService {
@Autowired
private MemberDao memberDao;
@Override
public Member findByTelephone(String telephone) {
return memberDao.findByTelephone(telephone);
}
@Override
public void add(Member member) {
String password = member.getPassword();
if (password != null) {
//使用MD5将密码的明文进行加密
password = MD5Utils.md5(password);
member.setPassword(password);
}
memberDao.add(member);
}
}
2.2.4 Dao接口
在MemberDao接口中声明findByTelephone和add方法
public Member findByTelephone(String telephone);
public void add(Member member);
2.2.5 Mapper映射文件
在MemberDao.xml映射文件中定义SQL语句
<!--新增会员-->
<insert id="add" parameterType="com.itheiheihei.pojo.Member">
<selectKey resultType="java.lang.Integer" order="AFTER" keyProperty="id">
SELECT LAST_INSERT_ID()
</selectKey>
insert into t_member(fileNumber,name,sex,idCard,phoneNumber,regTime,password,email,birthday,remark)
values
(#{fileNumber},#{name},#{sex},#{idCard},#{phoneNumber},#{regTime},#{password},#{email},#{birthday},#{remark})
</insert>
<!--根据手机号查询会员-->
<select id="findByTelephone" parameterType="string" resultType="com.itheiheihei.pojo.Member">
select *
from t_member
where phoneNumber = #{phoneNumber}
</select>
3. 权限控制
3.1 认证和授权概念
- 前面我们已经完成了XX健康后台管理系统的部分功能,例如检查项管理、检查组管理、套餐管理、预约设置等。接下来我们需要思考2个问题:
- 问题1:在生产环境下我们如果不登录后台系统就可以完成这些功能操作吗?
- 答案显然是否定的,要操作这些功能必须首先登录到系统才可以。
- 问题2:是不是所有用户,只要登录成功就都可以操作所有功能呢?
- 答案是否定的,并不是所有的用户都可以操作这些功能。不同的用户可能拥有不同的权限,这就需要进行授权了。
认证:系统提供的用于识别用户身份的功能,通常提供用户名和密码进行登录其实就是在进行认证,认证的目的是让系统知道你是谁。
授权:用户认证成功后,需要为用户授权,其实就是指定当前用户可以操作哪些功能。
本文章就是要对后台系统进行权限控制,其本质就是对用户进行认证和授权。
3.2 权限模块数据模型
前面已经分析了认证和授权的概念,要实现最终的权限控制,需要有一套表结构支撑:
用户表t_user
、权限表t_permission
、角色表t_role
、菜单表t_menu
、用户角色关系表t_user_role
、角色权限关系表t_role_permission
、角色菜单关系表t_role_menu
。
表之间关系如下图:
通过上图可以看到,权限模块共涉及到7张表。在这7张表中,角色表起到了至关重要的作用,其处于核心位置,因为用户、权限、菜单都和角色是多对多关系。
接下来我们可以分析一下在认证和授权过程中分别会使用到哪些表:
认证过程:只需要用户表就可以了,在用户登录时可以查询用户表t_user进行校验,判断用户输入的用户名和密码是否正确。
授权过程:用户必须完成认证之后才可以进行授权,首先可以根据用户查询其角色,再根据角色查询对应的菜单,这样就确定了用户能够看到哪些菜单。然后再根据用户的角色查询对应的权限,这样就确定了用户拥有哪些权限。所以授权过程会用到上面7张表。
本案例将会使用 Spring Security权限控制框架进行权限控制