扫码登录（websocket 和 异步轮训）

扫码登录一般分两步，第一步扫码获取扫码者信息，第二步需要手动确认登录。

 

1、使用websocket

import QRCode from 'qrcodejs2';
import SockJS from  'sockjs-client';  
import  Stomp from 'stompjs';
let stompClient = null;


    mounted() {
        this.connect();
    },
    beforeDestroy: function () {
        // 页面离开时断开连接
        this.disconnect();
    },
    methods: {
        initCode(uuid) {
            document.getElementById('codeImg').innerHTML = ''; //清除上一次的二维码
            this.qrcode = new QRCode('codeImg', {
                width: 246,
                height: 246,
                text: uuid, // 二维码地址
                colorDark: '#000',
                colorLight: '#fff',
                correctLevel: QRCode.CorrectLevel.H
            });
        },
        async getId() {
            let res = await _getId();
            if (res.code == '0') {
                return res.data;
            }else{
                return '';
            }
        },
        async connect() {
            let uuid = await this.getId();
            this.initCode(uuid);
            let host = window.location.origin;
            let socket = new SockJS(host + '/myUrl?uuid=' + uuid);
            stompClient = Stomp.over(socket);
            stompClient.connect({}, (frame)=> {
                this.getStatus = false;
                //监听的路径以及回调需要和后端约定号
                stompClient.subscribe('/user/queue/sendUser', (response)=>{
                    this.showResponse(response.body);
                });
            });
        },
        disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
        },
        showResponse(prama) {
            console.log(prama,'服务端推送结果');
             //返回的数据需要转成对象。
            let res = JSON.parse(`${prama}`);
          
            doSomething();
               
        },
        refetch(){
            this.connect();
        }

 

2、使用ajax轮询请求结果，需要处理结果为空，超时 ， 成功等状态，需要约定超时时间，接口最多多少秒返回结果。还需要注意自己的请求失效时间，浏览器默认应该是2分钟，一般项目设置30s左右。