vue：如何设计网页登录功能（涉及信验证码倒计时、手机登录和token存储）

---

一、前言

上一篇文章介绍了如何设计并封装请求拦截器和响应拦截器、实现统一接口管理。这一篇文章将会介绍如何实现短信验证码倒计时、实现手机登录并储存token的功能。

---

二、“发送验证码”功能分析

在本项目中，点击“获取验证码”按钮后，需要执行以下功能：

1.验证是否输入正确格式的手机号；

2.验证滑块滑动位置是否正确；

3.如果1、2两步无误，则按钮消失，展现60s倒计时。

值得注意的是，前端无法知道验证码输入得是否正确，只能得到验证码是否发送成功的信息，进一步核对需要靠后端。所以，前端一般只需要判断验证码是否为空。

三、“发送验证码”步骤

1.绑定点击事件

在“获取验证码”按钮上绑定一个点击事件，这里取名为getSMSCode()。该按钮组件代码如下：

<div class="input-group">
	<input type="text" placeholder="请输入短信验证码" v-model="userSMSCode">
	<div @click="getSMSCode()" class="btn" v-show="!isShowCode">获取验证码</div>
	<div class="btn btn-code" v-show="isShowCode">{
   {
   count}}</div>
</div>

需要在data中注册相关数字count、maxcount和对象isShowcount：

data () {
   
    return {
   
      userPhone:"",
      isShowCode:false,
      count:60,
      maxcount:60
    }
  },

getSMSCode()函数代码如下：

    countDown(){
   
    //倒计时方法
      let timer = setInterval(()=>{
   
          this.count--
          if(this.count===0){
   
          clearInterval(