vue实现企业微信扫码登陆
# 前端 Vue 实现企业微信扫码登录
需求:公司用的企业微信,PC 端的管理后台,想通过企业微信扫码登录。相比传统的账号密码方便很多。
企业微信扫码登录流程文档:(链接 (opens new window))
对于前端来说,重要的是如何构造扫码登录链接:
有两种方法:
- 构造独立窗口登录二维码(不太符合需求)
- 内嵌登录二维码(主讲)
步骤一:引入 js 文件 在 index.html 中通过 script 标签引入
<!DOCTYPE html>
<html lang="zh-CN">
<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>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
步骤二: 在登录页面潜入二维码
// template中需要有放置二维码的容器
<el-tab-pane label="扫码登录" name="first">
<div id="wx_qrcode"></div>
</el-tab-pane>
// js
mounted() {
window.WwLogin({
id: 'wx_qrcode', // 登录页面显示二维码的容器id
appid: '', // 企业微信的CorpID,在企业微信管理端查看
agentid: '', // 授权方的网页应用id,在具体的网页应用中查看
redirect_uri: encodeURIComponent(URL), // 重定向的地址,需要进行encode
state: '',
href: '', // 自定义样式链接,只支持https协议的资源地址
})
},
2
3
4
5
6
7
8
9
10
11
12
13
14
15
一开始用的 encode 解码,跳转不成功,这里大概介绍下两个区别:
# encodeURI 和 encodeURIComponent 的区别
encodeURI 改方法通过将特定字符的每个实例的每个实例替换为一个、两个三或转义序列来对统一标识符进行编码 参数是一个完整的 URI 返回值是一个新字符串,表示提供的字符串编码为统一资源标识符 不会替换保留字符(; , / ? : @ & = + $)、非转义的字符(字母 数字 - _ . ! ~ * ' ( )、数字符号(#) 注意:encodeURI 自身无法产生能适用于 HTTP GET 或 POST 请求的 URI,例如对于 XMLHTTPRequests, 因为 "&", "+", 和 "=" 不会被编码,然而在 GET 和 POST 请求中它们是特殊字符。
encodeURIComponent encodeURIComponent()是对统一资源标识符(URI)的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的 UTF-8 编码(只有由两个 Unicode 代理区字符组成的字符才用四个转义字符编码) 参数是 string: URI 的组成部分 返回值是一个新字符串,原字符串作为 URI 组成部分被编码后形成的字符串。 不转义的字符 A-Z a-z 0-9 - _ . ! ~ * ' ( )
# 获取 url 参数
- 原生 js
let href = window.location.href // 完整的url路径
let search = window.location.search // 获取从?开始的部分
url = deCodeURI(search)
let splitIndex = url.indexOf('?') // 返回第一个?号的位置
var str = url.substring(splitIndex + 1) // 获取到查询参数
获取url中所有的参数,序列在在一个对象中;
var getAllUrlParam = function(str) {
var urlArr = str.split('&')
var obj = {}
for(var i = 0; i < urlArr.length; i++) {
var arg = urlArr[i].split('=')
obj[arg[0]] = arg[1]
}
return obj
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- 使用 vue-router 可直接通过$route 获取
我们也会重定向到登录页面,然后此刻链接上会带有 code 值,然后传给后端,因为是复用 login 组件(只是路由参数发生改变),所以不会在触发 vue 的生命周期,有以下两种方式
watch: {
$route(to) {
if (to.query.code) {
// methods中调接口的方法
this.scancodeLogin(to.query.code)
}
},
},
2
3
4
5
6
7
8
beforeRouteUpdate(ro, from, next) {
// 在当前路由改变, 但是该组件被复用时调用
// 举例: 对于带有动态参数的路径 /foo/:id,在/foo/1 和/foo/2 之间跳转的时候, 由于会渲染同样的 Foo 组件,组件会被复用, 此刻该钩子会被调用
// 可以访问组件实例 this
}
2
3
4
5