• 准备工作

前提：1、在阅读此实践方案之前，确保已经对OAuth2.0授权流程以及完整阅读了【开放平台-网站应用-微信登录功能-网站应用微信登录开发指南（点击红字去阅读）】并理解相应的授权流程

2、在开放平台注册并申请了相关到网站应用，填写了开发信息-授权回调域，获得了接口 （微信登录）。

• 原理简介

1.将微信登录二维码内嵌到自己的vue前端登录页面中，扫码后用户点击确认登录后会跳转回授权回调域（授权回调域设置与vue前端域名一致）

2,此时携带code和state参数，vue在路由拦截中判断code和state参数，并携带code和state跳转到登录页面实现后续登录逻辑

3，登录页面在钩子函数mounted()中判断是否是微信授权登录，通过相关接口传送code和state给服务端，

4.由服务端携带code通过请求access_token接口请求access_token并完成后续登录逻辑，返回相应结果给vue前端。此时授权登录完成。

• 实现

1.将二维码内嵌到vue前端登录页面中：文档中已介绍相关案例代码如下

步骤1：在页面中先引入如下JS文件（支持https）

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

步骤2：在需要使用微信登录的地方实例以下JS对象：

var obj = new WxLogin({
 self_redirect:false,
 id:"login_container", 
 appid: "", 
 scope: "", 
 redirect_uri: "",
  state: "",
 style: "",
 href: ""
 });

x相关参数说明请仔细阅读文档中的参数说明；其中参数self_redirect的参数为false 即确认登录后再top window跳转到redirect_uri

内嵌二维码示例：

程序实现片段：引入js文件 ，通过自定义组件，将js文件引入页面

export default {
    components: {
        'remote-js': {
            render(createElement) {
                return createElement('script',{attrs:{type:'text/javascript',src:this.src}});
            },
            props:{
                src:{type:String,required:true}
            }
        }
    }
}

页面内添加js相关组件，并实例WxLogin：具体实现方式结合自己的登录页面业务逻辑实现：注意回调地址不支持#号输入，会将#号后内容清除

var obj = new WxLogin({
          self_redirect: false,
          id: "wechat-qrcode",
          appid: res.data.appid,
          scope: "snsapi_login",
          redirect_uri: '',
          state: ''
        });

h回调后，路由拦截设置：获取code，以及state，注意vue会自动添加 '#/' 在url地址后边，注意获取参数时去除

通过next（）设置query参数 将code，state传到登录页面，

登录页面钩子函数mounted（）中判断并请求服务端相应接口，例如判断参数有误code和state等 进行请求 服务端相应接口。完成相应的登录逻辑

此方案已经实现并使用中，如果有相关咨询问题，欢迎各位开发者大拿进行讨论。