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

pc后台管理系统vue登录页面实现私有版企业微信扫码登录在登录页面实现企业微信二维码扫码登录_vuepc端项目使用ww.createwwloginpanel企业微信扫码登录

大致流程

  • 在页面构建二维码
  • 扫二维码之后,企业微信那边会跳转到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=

今天的文章pc后台管理系统vue登录页面实现私有版企业微信扫码登录分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/68734.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注