vue实现企业微信扫码登陆功能

企业微信扫码登陆官方文档
https://developer.work.weixin.qq.com/tutorial/scan-login/4

1、在项目根目录的 index.html 文件中引入js文件

<script src="http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js"></script>

2、在需要展示二维码页面的html部分 为展示二维码准备好节点

<div class="modalDivScanCode" v-show="isRegisterType == 1">
     <h2>你好!</h2> 
     <p>请使用 <strong>企业微信</strong> 客户端进行扫码授权</p>
     <!-- <p>Auth Code Sample.</p> -->
     <div id="qr_login"></div>
 </div> 

3、示例化 wwlogin 对象，根据实际情况配置对应属性，并且挂载到指定的 Dom 节点上：

mounted:{
    let url = 'https://xxxxxxxxxxx'; url一般为自己当前的登陆页面，要做一个回调获取到code
    // let url = location.origin + '/xpest/console_v2/ui/login';
    var wwLogin = new WwLogin({
        id: "qr_login",
        appid: res.appid,
        agentid: res.agentId,
        redirect_uri: encodeURI(url),
        state: res.state,
        href: "",
        lang: "zh",
    })
}

3、这个时候二维码已经出现，扫描二维码，用户在手机上同意后，页面跳转，跳转的页面就是上面自己定义的url，跳转到这个url后地址后面会带一个code参数，拿到这个code

vue拿到code

watch: {
   "$route.query": {
        handler(newVal, oldVal) {
            console.info(newVal, oldVal)
            this.code = this.$route.query["code"]
         },
        deep: true,
        immediate: true
    }  
},

js拿到code

function getQueryVariable(code) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == code) {
            return pair[1];
        }
    }
    return (false);
}

4、将code传给后端，后端识别身份，判断没问题就可以进行页面的跳转了

getStaffInfo(){ // 验证企业微信二维码扫码登录
    let params = {
        code:this.code
    }
    auth_qrcode(params).then(res => {
        if(res.length == 0) {
            setTimeout(() => {
                location.href = "https://xxxxxxxxxxx"
                return
            }, 100);
        }
    })
},

完