pc后台管理系统vue登录页面实现私有版企业微信扫码登录

大致流程

  • 在页面构建二维码
  • 扫二维码之后,企业微信那边会跳转到redirect_uri你重定向的地址,后面会拼接code参数,一般重定向地址都是本页面
  • 在本页面获取url后面拼接的code,用code去请求自己后端写好的鉴权接口
  • 接口用access_token和code去获取用户的企业微信号
  • 接口请求成功会返回token,页面再将token存入,后续实现和登录后的操作一致

实现步骤

参考Vue实现企业微信扫码登录 - 野狼谷 - 博客园

  • public/index.html 引入js文件

动态引入:

<script src="https://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript"></script>

本地静态引入:

先把js文件放在public/utils 文件夹下,然后再本地引入,注意这里要使用<%= BASE_URL %>,否则静态引入会访问不到文件

<script type="text/javascript" src="<%= BASE_URL %>utils/wwLogin-1.0.0.js"></script> -->
  • 建一个登陆页面 /pages/login/login.vue,信息填写完整,二维码就出来了 
  • vue中用watch监听路由变化取code,传到接口做处理

但是,我这里为了解决二维码登录成功后页面会在登录页再停留一下才跳进系统首页的问题,将生成二维码js的所有处理逻辑写在了登录页面。以下是相关代码:

html部分:

<img src="~&#
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值