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

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