vue二维码扫描登陆
第一次发表文章,想到自己当初做扫码登陆的时候找度娘找的是一把心酸一把泪。。现在把自己的写好的心得发一下。。。
二维码扫码登陆主要的思路(前端):
1、进去页面默认先请求接口生成特定的二维码;
2、前端一直轮循请求一个长链接,
3、直到200结束
话不多说,上代码。
安装二维码生成依赖
npm install --save qrcodejs2
main.js中引入
import QRCode from 'qrcodejs2'
登陆页面中引入
<div class="qrcode" >
<div id="qrcode"></div>
</div>
mounted(){
let _this=this;
_this.$nextTick(() => {
_this.loginqrcode()
})
},
loginqrcode(){
let _this=this;
_this.tab_mue()
_this.$axios.post('login/loginUri',{}).then( res =>{
if(res.data.code == 200){
_this.QRcodeurl=res.data.data
_this.$QRCodeSC(_this.QRcodeurl) //由后台提供的长连接生成的二维码
_this.loginUriState()
}
else {
_this.$Message.error(res.data.message)
}
}).catch( error =>{
console.log(error)
})
},
loginUriState(){
let _this=this;
_this.$axios.post('login/loginUriState',{code:_this.QRcodeurl.split('=')[1]}).then( res =>{
if(res.data.code == 31000){
sessionStorage.setItem('account',res.data.data.account)
sessionStorage.setItem('role_slug',res.data.data.role_slug)
//console.log(res)
_this.$router.push({
path:'/addCategory/centersCon'
})
}
else if(res.data.code == 31001){ //在不扫码的时候没三秒轮循一次接口
_this.timer=setTimeout( () =>{
_this.loginUriState()
},3000)
}
else{
_this.$Message.error(res.data.message)
return
}
})
},
注意:在成功后,需清除计时器。
清除计时器时在生命周期中
destroyed
销毁
destroyed() {
clearInterval(this.timer);
this.timer = null;
}
至此全部完结,第一次发表,有问题的欢迎来提~谢谢