【Vue】封装api接口 - 登录功能

api/login.js 提供登录 Api 函数

// 验证码登录
export const codeLogin = (mobile, smsCode) => {
  return request.post('/passport/login', {
    form: {
      isParty: false, // 通用的直接传默认值
      mobile,
      partyData: {}, // 通用的直接传默认值
      smsCode
    }
  })
}

login/index.vue 登录功能

<input class="inp" v-model="msgCode" maxlength="6" placeholder="请输入短信验证码" type="text">
<div class="login-btn" @click="login">登录</div>

<script>
// import { getPicCode, getMsgCode, codeLogin } from '@/api/login'
data () {
  return {
    msgCode: '',
  }
},
methods: {
  async login () {
    // 前端一定要先校验，否则会给后端很大的压力
    if (!this.validFn()) {
      return
    }
    if (!/^\d{6}$/.test(this.msgCode)) {
      this.$toast('请输入正确的手机验证码')
      return
    }
    // 如果这里有提示，直接回车，上面会自动帮你导包
    await codeLogin(this.mobile, this.msgCode)
    this.$router.push('/')
    this.$toast('登录成功')
  }
}
</script>