webpc端 微信授权登陆 实例详解

首先，看看微信官方文档，了解一下具体实现步骤

微信官方文档： 微信登陆开发指南

基本了解了微信登陆的流程后，然后我们再来一起踩坑

1、先去微信公众平台申请网站，appId，设置域名 2、调用微信地址生成二维码

// 微信登陆 usewxlogin() { let appId = 'wx515d8d1893f1e1f5' //公众号平台提供的appId let redirectURI = 'http://www.zdindin.com/' //扫码后回调地址 window.location.href = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appId + '&redirect_uri=' + redirectURI + '&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect' },

值得注意的是，此时本地联通，但是域名只能是线上域名，而且，微信公众号平台，后台开发的回调地址都要统一，不然微信回调地址会报错，此时我们本地可以直接写线上地址。调试的时候，可以先在本地发起扫码，扫完码后，看看回调地址是不是线上你想要，就能实现困扰我很久的本地联通问题。

3、扫码后回调成功会返回带code的线上地址

例如我扫码后的回调：http://www.zdindin.com/?code=021IzkJJ0vzMX92lx7JJ0I15JJ0IzkJ6&state=STATE#/user/accountInfo

4、此时需要接受code，再把code传给后台获取token

// 封装个公用方法，截取浏览器参数 const getUrlKey = (name) =>{ return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null } export default { getUrlKey: getUrlKey } //调用方法截取code import indexApi from '@/assets/api/index.js' //引入封装的api import common from '@/assets/js/common.js' //引入公用方法 created() { // 微信授权登陆 let code = common.getUrlKey('code') if (code) { indexApi.weixinGoIndex(code).then(res => { if (res && res.code == 0) { localStorage.setItem('token', res.data.token) } }) } },

如此，微信pc端扫码授权登陆就完成了。