给vue-element-admin的登录加上⼀个滑动验证码的校验功能
给 vue-element-admin 的登录加上⼀个滑动验证码的校验功能
在设计登录功能的时候我们会加上⼀个验证码的校验功能做进⼀步的校验！也可防⽌⼀些⽽已的登陆攻击！那么我们今天就进⾏将vue-element-admin 登录的时候加上⼀个滑动验证码的校验，好吧，先上效果图，如果是你想要的那种效果那就继续往下看，不是话就不⽤浪费时间了
效果图
⾸先
先添加的这个plugins中的js⽂件
import VabVerify from'zx-verify'
import'zx-verify/dist/zx-verify.css'
export default VabVerify
是不是有点蒙怎么就这么少，因为到这边的时候你得先引⼊⼀下 zx-verify js包才⾏npm i verify
接着
那么接下来就直接在vue-element-admin 的登录界⾯进⾏改造了
<template>
<el-col :span="24" >
<el-popover
placement="top"
width="400"
trigger="click"
>
<!--验证码-->
<div class="verify-container">
<vab-verify
ref="slideDiv"
:w="350"
:slider-text="text"
:h="175"
@success="handleSuccess"
@fail="handleError"
></vab-verify>
vue element admin
</div>
<el-button :loading="loading" type="primary"
@click.native.prevent="handleLogin" slot="reference">登录
</el-button>
</el-popover>
</el-col>
</template>
<script>
methods:{
handleLogin(){
},
//验证码
handleSuccess(){
var vm =this
vm.$message({
showClose:true,
message:'验证成功！',
type:'success'
})
//跳转登录
this.$refs.loginForm.validate(valid =>{
if(valid){
this.loading =true
this.$store.dispatch('user/login',this.loginForm).then(()=>{
this.$router.push({ direct ||'/'})
this.loading =false
}).catch(()=>{
this.loading =false
})
}else{
console.log('error submit!!')
return false
}
})
},
handleError(){
var vm =this
vm.$message({
showClose:true,
message:'验证失败！',
type:'error'
})
}
}
</script>
那么最后讲⼀下这个登录验证的逻辑，登录还是那么登录，我只是在他登录的时候先判断⼀下你这个验证码是不是输⼊正确，如果说你输⼊的是正确的话那么我就跳转登录功能去获得所需要的登录数据。那要是输⼊错误的话那么就继续重新刷新继续输⼊验证。
结果
搞定收⼯

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。