前端登录页中图片验证码和注册时的短信验证码

Posted 2021-06-12 尔嵘

一、图片验证码

<el-form-item prop="captcha">
	<el-row :gutter="20">
		<el-col :span="14">
			<el-input ref="inputCaptcha" v-model="dataForm.captcha"
                placeholder="验证码"
                onkeyup="value=value.replace(/[^\\a-\\z\\A-\\Z0-9]/g, '')">
                <span slot="prefix" class="el-input__icon">
                    <svg class="icon-svg" aria-hidden="true">
                        <use xlink:href="#icon-safetycertificate"></use>
                    </svg>
                </span>
            </el-input>
        </el-col>
        <el-col :span="10" class="login-captcha">
            <img :src="captchaPath" @click="getCaptcha()">
        </el-col>
    </el-row>
</el-form-item>     

export default {
        data() {
            return {
               captchaPath: '',
               dataForm:{
                   uuid: "",
               },
             
            }
        },
        
        methods: {

            //获取UUID
            getUUID(){
               return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
                 return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
                })
            },

            // 获取验证码
            getCaptcha() {
             this.dataForm.uuid = this.getUUID();
             this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`;
            },

        }
}
 

上述给出了验证码获取的关键代码，至于你业务中怎么获取，自己结合生命周期和逻辑调用一下，最后通知ES6的模板字符串拼接成完整的url路径this.captchaPath，赋值给img的src属性,达到右侧验证码图片显示，如需验证：在调取登录接口时候，验证表单数据，根据后台返回的结果进行相应的提示信息。

            // 表单提交
            dataFormSubmitHandle: debounce(function () {
                this.$refs['dataForm'].validate((valid) => {
                    if (!valid) {
                        return false
                    }
                    //判断复选框是否被勾选 勾选则调用配置cookie方法
                    if (this.checked == true) {
                        //传入账号名，密码，和保存天数3个参数
                        this.setCookie(this.dataForm.username, this.dataForm.password, this.checked, 30);
                    } else {
                        //清空Cookie
                        this.clearCookie();
                    }
                    this.$http.post('/login', this.dataForm).then(({data: res}) => {
                        if (res.code !== 0) {
                            this.getCaptcha();
                            this.dataForm.captcha = "";
                            this.$refs['inputCaptcha'].focus();
                            this.$refs['dataForm'].validate((valid) => {
                                if (!valid) {
                                    return false
                                }
                            });
                            return this.$message.error(res.msg)
                        }
                        sessionStorage.clear();
                        Cookies.set('token', res.data.token);
                        this.$router.replace({path: '/home'}).catch((error) => {
                            return false
                        });
                    }).catch((error) => {
                        console.log(error);
                        // this.$message.error("请求超时, 请查看是否操作成功");
                        return false
                    })
                })
            }, 1000, {'leading': true, 'trailing': false})

 

二、短信验证码

关于阿里云中短信验证码的几个参数

1. alisms.accessKeyId = ****

2. alisms.accessKeySecret = ****

3. alisms.endpoint = ****

4. alisms.topic = ****

5. alisms.signName = ****

需要你在阿里云进行相应的配置，比如短信模板，我这里其他都弄好了，前端只需要把后端的接口调用一下，传一个手机号参数就行了

参考：

【1】https://blog.csdn.net/Qixx_799/article/details/106411765