web pc端 微信授权登陆 实例详解

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

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

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

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端扫码授权登陆就完成了。