前端 Vue 实现企业微信扫码登录

需求：公司用的企业微信，PC 端的管理后台，想通过企业微信扫码登录。相比传统的账号密码方便很多。企业微信扫码登录流程文档：（链接）

对于前端来说，重要的是如何构造扫码登录链接：有两种方法：

构造独立窗口登录二维码（不太符合需求）
内嵌登录二维码（主讲）

步骤一：引入 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>

步骤二：在登录页面潜入二维码

// 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协议的资源地址
        })
    },

一开始用的 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
}

使用 vue-router 可直接通过$route 获取

我们也会重定向到登录页面，然后此刻链接上会带有 code 值，然后传给后端,因为是复用 login 组件(只是路由参数发生改变），所以不会在触发 vue 的生命周期，有以下两种方式

 watch: {
        $route(to) {
            if (to.query.code) {
               // methods中调接口的方法
                this.scancodeLogin(to.query.code)
            }
        },
    },

beforeRouteUpdate(ro, from, next) {
     // 在当前路由改变， 但是该组件被复用时调用
     // 举例： 对于带有动态参数的路径 /foo/:id，在/foo/1 和/foo/2 之间跳转的时候， 由于会渲染同样的 Foo 组件，组件会被复用， 此刻该钩子会被调用
    // 可以访问组件实例 this
}