企业微信扫码登录

遇到一个pc端项目，要接入企业微信的登录，怎么做的呢？就是首页做成企业微信的扫码登录界面，扫码后的地址就是自己项目的首页，只是首页获取到code的话 就调登录接口，然后进入系统就可以了。如果没权限进入系统的人，在扫码的时候就提示了
官方文档地址：https://developer.work.weixin.qq.com/document/path/91019

一、首先项目的首页弄成这个二维码样式

1.在需要展示企业微信网页登录二维码的网站引入如下JS文件，vue项目的话就是index.html中引入

<script type="text/javascript" src="https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.7.js"></script>

2.vue文件中，在登录页 给上id为codeDom的div元素，用来展示二维码

<div id="codeDom"></div>

3.必须在mounted里写入,因为mounted时才会挂载dom元素，否则报错

mounted:{
	let q = this.$qs.parse(window.location.search.slice(1)) //这里我是引入了qs插件来获取参数
    console.log(q) //这里是取链接后面的参数，如果有code就调登录接口
    if (this.isHave(q.code)) {
      //只要用户扫码了二维码，页面就会自动刷新，并且在原先的首页链接后面拼上code参数，识别到code就可以进系统了
      this.qrcodelogin(q.code)
    }
	let url = "https://www.baidu.com/",//假设这个是自己项目的首页地址
    var wwLogin = new WwLogin({
        id: "codeDom", //页面中id为codeDom的元素
        appid: "",//企业微信的CorpID，在企业微信管理端查看
        agentid: "",//	授权方的网页应用ID，在具体的网页应用中查看
        redirect_uri: encodeURI(url),//重定向地址，需要进行UrlEncode
    })
}
methods: {
	// 企业微信扫码登录接口
    qrcodelogin (code) {
      let data = {
        code: code
      }
      //这边就是调接口，如果返回成功 就可以登录进系统了
      this.$api.login 
        .qrcodelogin(data)
        .then(res => {
          console.log(res)
          if (res.code == 0) {
          	//登录成功时 可以拿到用户信息
            sessionStorage.setItem('token', res.data.token) // 保存用户到本地会话
            sessionStorage.setItem('user', res.data.name) // 保存用户到本地会话
            this.$router.push('/') // 登录成功，跳转到主页
          } else {
            this.$message({ message: res.message, type: 'error' })
          }
        })
        .catch(err => {
          this.$message({ message: err.message, type: 'error' })
        })
    },
}