网易云---手机验证码登录

5.3

5.3.0 写在前面

之前写扫码登录的时候对于什么时候clear那个发送请求获取二维码当前状态的定时器timer，只考虑了两种情况，现在再完善一下，再添加一种情况，就是路由的跳转：

关闭 Dialog弹窗

二维码状态：失效或者登录成功/失败

路由的跳转：只要是从 /logincode 跳转出去，就应该清理 timer

那么如何实现路由跳转出去清理当前组件里的 timer 呢？

刚开始我的想法是:
在父组件中设置变量 codeVisible，并且将其传递给子组件

在他们的父组件中监听 $route，当路由发生跳转的时候改变codeVisible的值
子组件的定时器中判断codeVisible，来决定是否清理 timer
// 监听路由变化
// 当路由从 /logincode 跳转到 /loginphone 或/register 将loginVisible变成 falsewatch: {'$route' (to, from) {console.log(from.path)// 下面的数据传送到子组件会有延迟// if (from.path === '/logincode') {//   console.log('从扫码页跳转出去了')//   this.codeVisible = false// }}}
但是！我发现这样的做法不起作用，使用Vue的浏览器工具我发现在父组件的值发生变化的时候，子组件的值还没有来得及变化，然后会有一个延迟，此时子组件已经被移除，跳转到了新的路由，然后timer还是没有清理掉。

最后我在扫码登录组件的 beforeDestroy周期，在销毁该组件之间将 codeVisible 置为 false，timer 也就清理掉了

beforeDestroy () {// 当前组件被销毁之前 将codeVisible设置为false 用于消除定时器this.codeVisible = false}

5.3.1 UI界面

5.3.2 页面逻辑分析和实现

半角二维码

点击跳转到扫码登录的路由 => 路由跳转
hover 提示信息：扫码登录更安全

这里的提示信息使用的是组件库的 el-tooltip，对位置稍作了调整。

<!-- 左上角半角二维码 --><div id="halfQR-container"><el-tooltipclass="item"effect="dark"content="扫码登录更安全"placement="right-start":offset="-110"><router-link to="/logincode"><el-imagestyle="width: 50px; height: 50px;":src="halfQRUrl"fit="contain"></el-image></router-link></el-tooltip></div>

IMG

使用了组件库的 el-image，调整了一下位置

<!-- 图片 --><div class="block" style="margin:20px 0"><el-imagefit="cover"style="width: 70%;position: relation; left: 50%; transform: translateX(-50%)":src="phoneImgUrl"><div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div></el-image></div>

表单

表单添加了验证，对电话号码添加了正则表达式来验证是否有效

当电话号码有效时，后面的获取验证码按钮才会取消 disabled ，否则无法发送验证码，主要是监听手机号

watch: {// 监听手机号 改变获取验证码按钮状态'ruleForm.phoneNumber': function (value) {const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/const val = reg.test(value)if (val) {this.attcode = false} else {this.attcode = true}}}

点击发送验证码按钮，该按钮消失，取而代之的是 60s 的倒计时

// 发送验证码async getCode () {// 调用 sendCode 发送验证码const sendCodeData = await sendCode(this.ruleForm.phoneNumber)if (sendCodeData.code !== 200) this.successSendMsg()// 修改页面样式const timer = setInterval(() => {this.codeSec = this.codeSec - 1this.codeMsg = this.codeSec + 's后重试'this.showBtn = falseif (this.codeSec === 0) {clearInterval(timer)this.codeSec = 60this.showBtn = true}}, 1000)}

验证码也添加了正则表达式来验证是否是四位

监听密码，当4位的时候自动请求并且登录

watch: {'ruleForm.phoneCode': async function (code) {if (code.length === 4) {// 自动请求并且登录const { data: byCodeData } = await byCode(this.ruleForm.phoneNumber, this.ruleForm.phoneCode)console.log(byCodeData)if (byCodeData.code === 200) {this.successLoginMsg()// 保存信息到 Vuex 跳转页面}}}}

奇奇怪怪

当验证码失败的时候我收到了状态码为503的返回数据，成功的时候是200，主要是这个503控制台报错让我十分难受

登录成功后（扫码和手机号）

登录成功后打算将账户信息都存放在 Vuex 中
由于扫码和手机号验证码端(之后别的组件也有可能要使用)都会使用到相同的方法来更新Vuex中的state数据，于是打算学习一下 Mixin 混入来达到代码更好的复用。
待更…

5.3.3 源码

github地址：CloudMusic-vue2

LoginByPhoneNumber.vue

<template><div id="login-phone-container"><!-- 左上角半角二维码 --><div id="halfQR-container"><el-tooltipclass="item"effect="dark"content="扫码登录更安全"placement="right-start":offset="-110"><router-link to="/logincode"><el-imagestyle="width: 50px; height: 50px;":src="halfQRUrl"fit="contain"></el-image></router-link></el-tooltip></div><!-- 图片 --><div class="block" style="margin:20px 0"><el-imagefit="cover"style="width: 70%;position: relation; left: 50%; transform: translateX(-50%)":src="phoneImgUrl"><div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div></el-image></div><!-- 输入框 --><div id="form-container" style="margin:10px"><!-- <el-input placeholder="请输入手机号" v-model="phoneNumber" class="input-with-select"><i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i></el-input> --><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" class="login-ruleFrom" style="margin:0 15px"><el-form-item label="" prop="phoneNumber"><el-input v-model="ruleForm.phoneNumber" placeholder="请输入手机号"><i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i></el-input><el-buttonsize="mini"class="getCodeButton":disabled="attcode"v-if="showBtn"@click="getCode">获取验证码</el-button><el-buttonclass="getCodeButton"plaindisabledv-else>{{codeMsg}}</el-button></el-form-item><el-form-item label="" prop="phoneCode"><el-input v-model="ruleForm.phoneCode" placeholder="请输入验证码"><i slot="prefix" class="el-input__icon el-icon-lock"></i></el-input></el-form-item><el-form-item label="" prop="type" style="margin-top:-10px"><el-switch v-model="ruleForm.autoLogin" active-text="自动登录" ></el-switch></el-form-item><el-form-item style="margin-bottom:-20px"><el-button type="primary" @click="submitForm('ruleForm')" style="width:100%;">登录</el-button><router-link to="/register" class="other-way"> 注册 </router-link></el-form-item></el-form></div></div>
</template><script>
import { byCode, sendCode } from '@/api/LoginAndRegister/loginByPhone.js'export default {data () {return {// 获取验证码按钮是否禁用attcode: true,// 获取验证码按钮是否展示showBtn: true,codeMsg: '获取验证码',// 倒计时codeSec: 60,halfQRUrl: require('@/assets/images/halfQR.png'),phoneImgUrl: require('@/assets/images/phoneImg.png'),ruleForm: {phoneNumber: '',phoneCode: '',autoLogin: false},rules: {phoneNumber: [{ required: true, message: '请输入手机号', trigger: 'blur' },{ pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请正确填写您的手机号码', trigger: 'blur' }],phoneCode: [{ required: true, message: '请输入验证码', trigger: 'blur' },{ pattern: /^[0-9]{4}$/, message: '请填写有效的验证码', trigger: 'blur' }]}}},watch: {// 监听手机号 改变获取验证码按钮状态'ruleForm.phoneNumber': function (value) {const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/const val = reg.test(value)if (val) {this.attcode = false} else {this.attcode = true}},'ruleForm.phoneCode': async function (code) {if (code.length === 4) {// 自动请求并且登录const { data: byCodeData } = await byCode(this.ruleForm.phoneNumber, this.ruleForm.phoneCode)console.log(byCodeData)if (byCodeData.code === 200) {this.successLoginMsg()// 保存信息到 Vuex 跳转页面}}}},methods: {// 错误提示信息errorMsg () {this.$message({showClose: true,message: '电话或验证码错误！',type: 'error'})},// 短信发送成功提示信息successSendMsg () {this.$message({showClose: true,message: '短信发送成功！',type: 'success'})},// 登录成功提示信息successLoginMsg () {this.$message({showClose: true,message: '登录成功！',type: 'success'})},// 提交登录表单async submitForm (formName) {console.log(this.ruleForm.phoneNumber, this.ruleForm.phonePassword, this.ruleForm.autoLogin)this.$refs[formName].validate(async (valid) => {if (valid) {// 发送请求const byCodeData = await byCode(this.ruleForm.phoneNumber, this.ruleForm.phoneCode)if (byCodeData.code === 200) {this.successLoginMsg()// 保存信息到 Vuex 跳转页面} else {this.errorMsg()}} else {console.log('error submit!!')return false}})},// 发送验证码async getCode () {// 调用 sendCode 发送验证码const sendCodeData = await sendCode(this.ruleForm.phoneNumber)if (sendCodeData.code !== 200) this.successSendMsg()// 修改页面样式const timer = setInterval(() => {this.codeSec = this.codeSec - 1this.codeMsg = this.codeSec + 's后重试'this.showBtn = falseif (this.codeSec === 0) {clearInterval(timer)this.codeSec = 60this.showBtn = true}}, 1000)}}
}
</script><style lang="less" scoped>#halfQR-container{position: absolute;top: 0;left: 0;}.el-select{width: 90px;}.input-with-select .el-input-group__prepend {background-color: #fff;}.other-way{display: inline-block;margin: 10px 0 25px 0;width: 100%;text-align: center;padding-right: 0;font-size: 14px;line-height: 28px;color: rgba(0,0,0,0.80);text-decoration-line:underline;}.getCodeButton{box-sizing: border-box;position: absolute;height: 100%;right: 0;border-radius: 0;}
</style>

网易云---手机验证码登录相关推荐

基于Selenium实现网易云音乐的登录
基于Selenium实现网易云音乐的登录前言一.准备工作 1.环境配置 2.确定页面的操作步骤 ①进入官网 ②点击登录 ③选择登录方式进行登录二.代码实现 1.公共方法的封装 2.登录操作总结 ...
【瑞吉外卖】day08：短信发送、手机验证码登录
目录 4. 短信发送编辑 4.1 短信服务介绍 4.2 阿里云短信服务介绍 4.3 阿里云短信服务准备 4.4 代码开发 5. 手机验证码登录 5.1 需求分析 5.2 数据模型 5.3 前端页面分 ...
Java实现手机验证码登录和SpringSecurity权限控制
手机验证码登录和SpringSecurity权限控制手机快速登录功能,就是通过短信验证码的方式进行登录.这种方式相对于用户名密码登录方式,用户不需要记忆自己的密码,只需要通过输入手机号并获取验证码就 ...
【瑞吉外卖项目】DAY5——第六章手机验证码登录
本章内容介绍手机验证码登录点击获取验证码收到短信,并输入验证码点击登录,登录成功短信发送_短信服务介绍和阿里云短信服务介绍短信服务介绍目前市面上有很多第三方提供的短信服务,这些第三方短信服 ...
学习【瑞吉外卖⑥】SpringBoot单体项目_手机验证码登录业务开发
视频:[黑马程序员]Java 项目实战<瑞吉外卖>,轻松掌握 SpringBoot + MybatisPlus 开发核心技术资料:2022 最新版 Java学习路线图>第 5 阶 ...
【从零开始分析项目实战】12-阿里云手机验证码登录功能的实现
注:本文章基于黑马程序员相关视频及资料进行编写,代码简单,较容易理解,若有问题或者源码资料获取可以在评论区留言或者联系作者! 文章目录开篇一.短信发送 (1)短信服务介绍 (2)阿里云短信服务 ( ...
阿里云短信平台实现手机验证码登录
阿里云短信平台实现手机验证码登录首先创建一个工具类工具类AliyunMessageUtil代码如下所示: public class AliyunMessageUtil {private stati ...
验证码登录开发----手机验证码登录
手机验证码登录需求分析为了方便用户登录,移动端通常都会提供通过手机验证码登录的功能手机验证码登录的优点: 方便快捷.无需注册,直接登录使用短信验证码作为登录凭证,无需记忆密码安全登录流程: ...
Keycloak实现手机验证码登录
背景说明使用Keycloak作为账号体系的项目中,经常会被问到Keycloak如何实现手机验证码登录,Keycloak有没有内置的基于短信的登录实现SMS-based two-/multi-fact ...