vue等前后端分离微信授权登录的解决方案
发布于 4 年前 作者 qkang 2476 次浏览 来自 分享

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等 进行请求 服务端相应接口。完成相应的登录逻辑

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

回到顶部