vue网易云二维码登录

 html代码

<el-card  v-loading="looogin" class="el_add_card" shadow="hover"> <!-- element-ui卡片 -->
    <img style="width:128px;height:128px" :src="urrl" alt="">
    <button @click="login()" >获取二维码</button>
    <p 
        style="line-height:100px;font-size:16px;"
    >
       <img
         style="width:100px;height:100px;brder-radius:50%;"
       :src="headImg" alt="">
       <span>{{usNName}}</span>
    </p>
</el-card>

 

用到的data

   urrl:'',

   key:'',

   usNName:'',

   cookier:'',

   uid:'',

   headImg:'',

 

事件 

login(){
        let date=new Date();
        this.$axios({
            method: "post",
            url: `http://localhost:3000/login/qr/key?${date.getTime()}`,
            data: '',
        })
        .then((res) => {//获取二维码key
            // console.log(res.data.data.unikey)
            //   this.urrl=res.data.data.qrurl
            this.key=res.data.data.unikey

            let date=new Date
            this.$axios({
                method: "post",
                url: `http://localhost:3000/login/qr/create?${date.getTime()}`,
                data: {
                    key:this.key,
                    qrimg:true
                },
            })
            .then((res) => {//获取二维码图片
                // console.log(res.data.data)
                this.urrl=res.data.data.qrimg
                this.aaaar()
            })
            .catch((error) => {console.log(error)});
        })
        .catch((error) => {console.log(error)});
    },
    aaaar(){
        let timerrr=setInterval(() => {//轮询检索二维码扫描状态
            let date=new Date
            this.$axios({
                method: "post",
                url: `http://localhost:3000/login/qr/check?${date.getTime()}`,
                data: {
                    key:this.key,
                },
            })
            .then((res) => {
                // console.log(res.data.cookie)
                //802:授权中
                //800:授权成功
                //803二维码失效
                if(res.data.code=='802'){
                    this.looogin=true
                }else if(res.data.code=='803'){
                    this.looogin=false
                    this.cookier=res.data.cookie
                    window.clearInterval(timerrr)
                    let date=new Date
                    this.$axios({
                        method: "post",
                        url: `http://localhost:3000/user/account?${date.getTime()}`,
                        data: {
                            cookie:this.cookier,
                        },
                    })
                    .then((res) => {
                        // console.log(res.data)
                        this.uid=res.data.account.id
                        this.usNName=res.data.profile.nickname
                        this.headImg=res.data.profile.avatarUrl
                    })
                    .catch((error) => {console.log(error)});
                }

            })
            .catch((error) => {console.log(error)});
        }, 1000);
    },