vue-cli 2.0实现扫码登陆

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;
    }

至此全部完结,第一次发表,有问题的欢迎来提~谢谢

  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值