微信扫码登录

1、 创建 项目/extend/wxlogin-v3 文件夹

2、 创建 项目/pages/wxLogin.vue，内容如下

<!--
    【整体思路流程】
    1. 先通过后端接口获取appid等敏感数据，保存到data中。
    2. 将获取到的数据传递给组件，如果正确无误扫码登录框就自动出来了。
    3. 用户扫码登录后，会自动跳转到重定向的回调域地址(解析code)，也就是前端当前的页面。
    4. 解析成功或失败，前端就可以拿着code去找接口换数据了，进行您的逻辑即可。
    ———————————————————————————————————————————————————————————
    【注意事项】
    1. [非常重要] 前端和后端必须都在一个回调域下，比如前端是:www.abc.com/index，
    后端的是:www.abc.com/admin，这样就处于同一个【www.abc.com】回调域下。如果前端是abc，后端是def，则无法互通。
    2. 一定要等敏感数据(appid等)请求过来后，再传递给组件！我是用的if暂时不渲染！
    3. redirect_uri 是回调域，重定向的地址，必须是微信开放平台里设置好的回调域（找后端看）,咱们测试默认的localhost,什么192.168.xx 统统不行，
    所以每次调试必须部署到线上进行测试，非常麻烦。
    如果想要解决，请访问：https://wangjiabin.blog.csdn.net/article/details/127787561
    ———————————————————————————————————————————————————————————
    这个扫码登录操作，必须要和后端进行协商，这些参数你不知道是什么、怎么做的时候，要去问后端！
-->

<template>
    <div>
        <!-- 微信扫码登录框 -->
        <!-- 配置说明请参考文章底部Props，或直接访问组件文档：https://github.com/toMatthew/vue-wxlogin -->
        <div v-if="sensitive != null">
            <wxlogin
            :appid="sensitive.appid"
            :scope="sensitive.scope"
            :redirect_uri="redirect_uri"
            state=""
            />
        </div>
        <!-- END -->

        <!-- 数据还未请求过来 -->
        <div v-else>二维码加载中...</div>
        <!-- END -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 敏感数据(appid等)
            sensitive: null,

            // 重定向的路径
            redirect_uri: null,
        }
    },

    mounted() {
        // 获取要重定向的路径(本页面url)
        this.getRedirect()

        // 获取敏感数据(appid等)
        this.getSensitive()
    },

    methods: {

        /**
         * 获取要重定向的路径(本页面url)
         * @description 赋值到本地,传递给组件
         * @return void
         */
        getRedirect() {
            // 注意要仅在客户端执行此段代码
            if(process.client) {
                // 获取本页面的域名,也就是下面的代码(需要UrlEncode编码)
                this.redirect_uri = encodeURIComponent(window.location.href)
            }
        },

        /**
         * 获取敏感数据(appid等)
         * @description 赋值到本地,传递给组件
         * @return void
         */
        getSensitive() {
            // 请求接口
            this.$axios.post(`XXX`).then(res => {
                // console.log(res)
                this.sensitive = res.data.data
                // 检测是否扫码登录成功(因为用户扫码登录后,会刷新页面,必须进行检测)
                this.testing()
            })
        },

        /**
         * 检测是否扫码登录成功
         * @description 判断检测url上有没有code拼接
         * @return void
         */
        testing() {
            // 获取URL上code
	        const code = this.getUrlParam('code')
            // 判断是否存在code
            if(code == null || code == '' || code == undefined) {
                // code为空
                // 意味着没有扫码登录,您的逻辑...
            } else {
                // code存在,调用接口获取登录信息
                console.log('【当前code】', code)
                this.getInfo(code)
            }
        },

        /**
         * 获取登录信息
         * @description 通过拿到的code,去接口换登录信息
         * @param {String} code - code
         * @return 
         */
        getInfo(code) {
            // 请求接口
            this.$axios.post(`XXX`, { code: code }).then(res => {
                // 判断code码
                // 获取失败
                if(res.data.code == 0) {
                    // 要做的操作...
                    if(process.client) {
                        // 大部分是清空url上的code参数并跳转回本页面
                        this.delUrlParam(window.location.href)
                    }
                }
                
                // 获取成功
                else {
                    // 业务逻辑
                    console.log(res)
                    // 回跳到原页面(去掉URL上的code参数)
                    this.delUrlParam(window.location.href)
                }
            })
        },

        /**
         * 解析URL参数
         * @description 截取路由参数
         * @param {String} name - 要解析的路由参数
         * @return String
         */
        getUrlParam(name) {
            let reg = new RegExp('(^|&)'+ name + '=([^&]*)(&|$)')
            let r = window.location.search.substr(1).match(reg)
            if(r != null){// ok
                return unescape(r[2])
            }
            // false
            return null
        },

        /**
         * 删除url路径指定参数
         * @description 去除地址栏url上的code参数,回到原页面
         * @param {String} url - URL
         * @param {String} key - KEY
         * @return String
         */
        delUrlParam(url, key = 'code') {
            let baseUrl = url.split('?')[0] + '?';
            let query = url.split('?')[1];
            if (query.indexOf(key) > -1) {
                let obj = {};
                let arr = query.split('&');
                for (let i = 0; i < arr.length; i++) {
                    arr[i] = arr[i].split('=');
                    obj[arr[i][0]] = arr[i][1];
                }
                delete obj[key];
                let url =
                    baseUrl +
                    JSON.stringify(obj)
                        .replace(/[\"\{\}]/g, '')
                        .replace(/\:/g, '=')
                        .replace(/\,/g, '&');
                // return url;
                window.history.pushState({},0,url);//跳转页面
            } else {
                // return url;
                window.history.pushState({},0,url);//跳转页面
            }
        },
    }
}
</script>
<style scoped>
</style>