vue实现企业微信扫码登录

浮游本尊

已于 2024-06-12 11:41:11 修改

阅读量1.8k

点赞数

分类专栏： Vue 文章标签： vue.js 企业微信前端

于 2021-03-12 09:30:34 首次发布

本文链接：https://blog.csdn.net/weixin_45658814/article/details/114685805

版权

Vue 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

首先看懂官方文档：https://work.weixin.qq.com/api/doc/90000/90135/90988
这个需求对于写过登录的集美来说，可能简单得不能再简单，了解这个需求最关键的还是清楚流程吖。

由图可知，大致流程是：
1、在页面构建二维码
2、扫二维码之后，微信那边会跳转到redirect_uri你重定向的地址，后面会拼接code参数，一般重定向地址都是本页面
3、在本页面获取url后面拼接的code，用code去请求接口
4、接口那边用access_token和code去获取用户的企业微信号
5、通过企业微信号查找数据库中是否存在，存在返回用户的基本信息，否则不存在返回提示‘该用户非企业人员’

目前我们所知的两种扫码登录方式是：
1、构造独立窗口登录二维码
2、内嵌登录二维码

按照本次需求，我们选择的是第二种，即内嵌式，当然，为了方便以后的查看，这边把第一种先简要说说。

1、构造独立窗口登录二维码

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="renderer" content="webkit|ie-comp|ie-stand" />
        <title>广告投放平台</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-slider-component@latest/theme/default.css" />
        <!-- 企业微信扫码登录 -->
        <script
            src="https://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js"
            type="text/javascript"
        ></script>
    </head>
    <body>
        <div id="app"></div>
    </body>

2、内嵌登录二维码

// template中需要有放置二维码的容器
<div class="login-box">
      <div class="wx-box">
        <div id="wx_box"></div>
      </div>
</div>
//js
initWxLogin(){
     window.WwLogin({ 
          id: 'wx_box', // 登录页面显示二维码的容器id
          appid: 'ww2xxxxxxxxxx',// 企业微信的CorpID，在企业微信管理端查看
          agentid: 1000000,// 授权方的网页应用id，在具体的网页应用中查看
          redirect_uri: 'https://www.modb.pro/login',// 重定向的地址，需要进行encode
          state: this.fromRoute
    })
}

完成这两步之后，登录页面的二维码会展示出来

// url 处理
export const getUrlSearch = () => {
  var url = window.location.search
  var urlObj = {}
  if (url.indexOf('?') > -1 && url.indexOf('&') < 0) {
    var vname = url.split('?')[1].split('=')[0]
    var val = url.split('=')[1]
    urlObj[vname] = val
  } else if (url.indexOf('?') > -1) {
    var vsearch = url.split('?')[1].split('&')
    vsearch.forEach((item) => {
      var vname = item.split('=')[0]
      urlObj[vname] = item.split('=')[1]
    })
  }
  return urlObj
}

// 设置用户信息
  async setUser ({ commit }) {
    const res = await this.$axios.$get('/napi/user/xxx').then(res => {
      commit('SetUserInfo', res)
    }).catch(e => {
      console.log(e)
    })
  }

beforeRouteEnter (to, from, next) {
      let _path = from.path
      next(vm => {    //因为当钩子执行前，组件实例还没被创建，vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
        if (_path && !vm.fromRoute) vm.fromRoute = _path
        let _url = getUrlSearch()
        if (_url && _url.code) {
          getUserByCodeApi({code: _url.code}).then(res => { //这一步是从url中获取其中的code，调接口传给后台
            if (res.data.success) {
              vm.setUser()
              vm.$message.success(res.data.operateMessage)
              vm.$router.push(decodeURIComponent(_url.state)) //decodeURIComponent函数可对URI 进行解码。
            } else {
              vm.$message.error(res.data.operateMessage)
            }
          })
        }
      })
    }

beforeRouteEnter(to, from, next)：进入路由之前执行的函数,写在组件里可根据路由进行页面判断或传值。
to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

浮游本尊

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
vue实现企业微信扫码登录

首先看懂官方文档：https://work.weixin.qq.com/api/doc/90000/90135/90988这个需求对于写过登录的集美来说，可能简单得不能再简单，了解这个需求最关键的还是清楚流程吖。由图可知，大致流程是：1、在页面构建二维码2、扫二维码之后，微信那边会跳转到redirect_uri你重定向的地址，后面会拼接code参数，一般重定向地址都是本页面3、在本页面获取url后面拼接的code，用code去请求接口4、接口那边用access_token和code去获取用户的
复制链接

扫一扫