cz_health_day09

项目第九天

项目需求

手机端的快速登录功能的实现

采用阿里云的短信服务功能，redis存贮数据可以设置消亡时间来对验证码进行一个有效时长的一个绑定

1、快速登录的实现

• 前端进行手机号的输入，手机号要进行正则表达式校验，获取验证码（后端接收到这个请求后，通过阿里云发送验证码，并将该验证码存入redis数据库中）
• 前端进行登录操作，后端，通过手机号在redis中查找到发送的验证码，与前端用户输入的验证码进行比较，相同就通过，登录成功，否则就失败
• 如果不存在这样的手机号用户，就自动注册用户信息
• 补充：为解决不断发送登录请求信息以及密码黑客破解登录，进行一下操作；设置登录次数，r通过redis保存登录次数，当登录错误数超过3次时，进行账号锁定，该账号就无法进行再登录，必须等到多少分钟后可以再次登录。
• 登录密码设置：对密码进行加盐加密处理，加盐即在密码前面加上一串随机的数据，后面接上密码
• 

前端代码

 <script>
        var vue = new Vue({
            el:'#app',
            data:{
                loginInfo:{}//登录信息
            },
            methods:{
                //发送验证码
                sendValidateCode(){
                    //获取手机号
                    let 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('验证码发送失败，请检查手机号输入是否正确');
                        }
                    });
                },
                //登录
                login(){
                    let telephone = this.loginInfo.telephone;
                    //校验手机号
                    if (!checkTelephone(telephone)) {
                        this.$message.error('请输入正确的手机号');
                        return false;
                    }
                    if (this.loginInfo.validateCode==null){
                        this.$message.error('验证码不能为空');
                        return false;
                    }
                    axios.post("/member/login.do",this.loginInfo).then((res) => {
                        if(res.data.flag){
                            //登录成功,跳转到index.html
                            window.location.href="/pages/index.html";
                        }else{
                            //失败，提示失败信息
                            this.$message.error(res.data.message);
                        }
                    });
                }
            }
        });
    </script>

后端代码

@RestController
@RequestMapping("/member")
public class MemberController {
    @Autowired
    private JedisPool jedisPool;
    @Reference
    private MemberService memberService;

    @RequestMapping("/login")
    public Result login(@RequestBody Map map, HttpServletResponse response) {
        Jedis resource = jedisPool.getResource();
        //获取前台的验证码
        String telephone = (String) map.get("telephone");
        String validateCode = (String) map.get("validateCode");
        try {
            //获取存入redis中的验证码
            String validateCodeInRedis = resource.get(telephone + RedisMessageConstant.SENDTYPE_LOGIN);
            if (validateCode != null && validateCodeInRedis != null && validateCodeInRedis.equals(validateCode)) {
                //判断当前账号是不是会员账号
                Member member = memberService.findByTelephone(telephone);

                if (member == null) {//如果不是会员，注册会员
                    member=new Member();
                    member.setRegTime(new Date());
                    member.setFileNumber(telephone);
                    memberService.add(member);
                }

                //将手机号做为cookie存入客户端
                Cookie cookie = new Cookie("login_member_telephone", telephone);
                cookie.setPath("/");
                cookie.setMaxAge(60 * 60 * 24 * 30);//设置cookie为一个月
                //将会员信息保存到redis,以手机号为主键，存储的时间为1小时
                String memberJson = JSON.toJSON(member).toString();
                resource.setex(telephone, 60 * 30, memberJson);

                return new Result(true, MessageConstant.LOGIN_SUCCESS);
            } else {
                //验证码输入错误
                return new Result(false, MessageConstant.VALIDATECODE_ERROR);
            }
        }catch (Exception e){
            e.getStackTrace();
            return new Result(true,"....................");
        }finally {
            resource.close();
        }
    }
}