前端学习-短信验证码登录

短信验证码登录是我们在项目开发的过程中很常见的一种方式，也是前端与后端接通数据的重要渠道，本文将详细介绍实现的整个流程，希望对大家有所帮助。

由于短信接口不是免费的，为了防止攻击者恶意盗刷，这里仅分享主要的实现流程，在后端将验证码默认为246810

主要步骤

分为以下几个：

1在utils/request.js中配置axios请求基地址

2手机手机号和验证码数据

3基于axios调用验证码登录接口

4使用bootstrap的alert警告框反馈结果给用户

接下来，是详细步骤：

1配置axios请求基地址

axios.defaults.baseURL = 'http://geek.itheima.net';

2封装获取表单数据的函数：

document.querySelector('.btn').addEventListener('click',  ()=> {
  const form = document.querySelector('.login-form')
  const data = serialize(form, { hash: true, empty:true })
  console.log(data)

保存之后，回到控制台，可以看到后台已经成功拿到了表单中提交的数据：

3基于axios调用验证码登录接口

  axios({
    url:'/v1_0/authorizations',
    method:'POST',
    data
  }).then(result => {
    console.log(result)
  }).catch(err => {
    console.dir(error)
  })
  
})

保存之后，可以看到控制台返回的详细信息：

如果验证码没有写对，则会进入 catch，返回错误信息

可以看到它执行了23行的代码：

4提示用户：封装了一个myalert函数,通过传入不同的参数，判断执行结果

function myAlert(isSuccess, msg) {
  const myAlert = document.querySelector('.alert')
  myAlert.classList.add(isSuccess ? 'alert-success' : 'alert-danger')
  myAlert.innerHTML = msg
  myAlert.classList.add('show')

  setTimeout(() => {
    myAlert.classList.remove(isSuccess ? 'alert-success' : 'alert-danger')
    myAlert.innerHTML = ''
    myAlert.classList.remove('show')
  }, 2000)
}

当登录成功时调用函数，传入true，返回

myAlert(true,'登录成功')

当登录失败时调用函数，传入false，返回错误信息

 myAlert(false,error.response.data.message)

原理解释

登录流程：手机号+验证码

1当用户输入手机号时，点击获取验证码，

2浏览器向服务器发起短信验证码接口请求，这个请求需要携带手机号，

3服务器收到请求后，为此手机号生成一个随机验证码，记录生成时间，并保存在服务器，

4服务器携带手机号和验证码调用运营商接口

5运营商接口通过部署在全国各地的基站向给定手机号发送验证码信息（无连接，只负责发送即可，不需要等待手机返回已收到的结果），紧接着，运营商就会发送验证码发送成功的信息给到服务器，服务器知道运营商已经成功发送信息给了用户，然后就会把请求发送的响应结果提示给用户，告诉前端验证码已经发送成功了，并开始倒计时，用户拿出手机，等待收到验证码，等待时间长短与时延有关，用户收到验证码后，将验证码填入到页面指定位置，

那么，这个验证码究竟是不是正确的？谁知道呢？是后端。这时，当用户点击登录时，前端会向服务器发送一个调用验证码登录的接口请求，这个请求需要携带手机号和验证码，这时，服务器就会根据收到的手机号和验证码跟生成的验证码进行对比，对比接收的时刻和生成的时刻有没有超过一个规定的时间，对比之后，返回一个登录成功或者失败的结果给前端，前端将这个结果通过js代码的方式反馈给用户，用户就知道自己有没有登录成功了。

好啦，以上就是短信验证码登录的整个流程，下期文章见~