XX健康:移动端开发手机验证码快速登陆

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());//将验证码存入RedisjedisPool.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.htmlwindow.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 {@Autowiredprivate JedisPool jedisPool;@Referenceprivate 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 {@Autowiredprivate MemberDao memberDao;@Overridepublic Member findByTelephone(String telephone) {return memberDao.findByTelephone(telephone);}@Overridepublic 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_memberwhere 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权限控制框架进行权限控制